Transforming a Fixed Bootstrap Site into a Mobile-Friendly Design

I am facing an issue with my bootstrap website as it is not responsive to different view sizes. I would like to make it responsive but I am unsure of how to do so. Additionally, I am using LESS to modify the twitter bootstrap css. Currently, my site is structured like this..

<div id="wrapper">
   <header>
      <div class="container">
         <div class="row">
            <div class="span12">
               <!-- LOGO HERE -->
            </div>
         </div>
      </div>
   </header>
   <div id="main-content" class="container">
      <div class="row">
         <div class="span8">
            <!-- My content -->
         </div>
         <div class="span4">
            <!-- My content too -->
         </div>
      </div>
   </div>
</div>

Furthermore, the website was designed for a width of 940px. When making it responsive, I want to limit the maximum page width to 940px instead of 1200px and still keep my div.wrapper centered on the page.

I hope all of this makes sense!

htmlcsstwitter-bootstrapresponsive-designless

Answer №1

If you want to enable a responsive layout, simply include the code below within the <head> section of your HTML document:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

You may need to adjust the path to the CSS file based on your project structure, especially if you are using the .less source files.

In your responsive.less file, make sure to either comment out or delete the line that reads:

@import "responsive-1200px-min.less";

This adjustment will ensure that your website is optimized for smaller screen sizes while maintaining a maximum width of 940px for the main content container.

Answer №2

To make the design fluid, replace .container with .container-fluid and .row with .row-fluid. Here is an example for reference: http://jsfiddle.net/ypkJQ/. Remember that using the .row-fluid class will reset the width counter for span*. This means that the width specified by span* under .row-fluid is based on the percentage width of its parent (.row-fluid).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to responsively position and scale a background image for a full-width div

Here is the situation: I have an SVG with dimensions of 1920*1920 pixels () This is what I require: I intend to use it as a background-image for a div that spans the full width of the screen. The background image for the div must be responsive. An essent ...

cssreactjssvgbackground-image

What is the process to obtain the child theme URL in WordPress?

Currently, I am working on creating a child theme for my WordPress website. I have successfully uploaded the assets folder which contains both CSS and JavaScript files. This child theme will be completely customized to suit my needs. Within the <head&g ...

javascriptphphtmlcsswordpress

Understanding the distinction between .navbar and .navbar a in CSS

Can you explain the distinction between .navbar and .navbar a? .navbar { overflow: hidden; background-color: #333; font-family: Arial; } .navbar a { float: left; font-size: 16px; color: white; ...

htmlcsscss-selectorsnavbar

What could be causing Gulp Autoprefixer to generate unaltered CSS files?

I am currently learning how to utilize Flexbox, and I have encountered an issue with prefixing while using Gulp. The error message that pops up when attempting to use Gulp autoprefixer is as follows: [19:21:22] Starting 'styles'... [19:21:22] Th ...

cssflexboxgulpautoprefixer

What is the best way to convert this html code into php?

I’m trying to figure out how to incorporate all of this into my loop, but I’m not sure if it can be broken up. However, PHP needs to interpret it as HTML. $movieDetails = <header class="masthead" role="banner"> <div class="logo-con ...

phphtmlvariables

The presence of a display block property within a div contained inside an li element results in extra whitespace

I am presenting the code below: <div class="settingsMenu" style="top: 135px; left: 149px; display: block;"> <ul> <li class="download" onclick="downTemplate('template1')">Download</li> <l ...

csshtmlhtml-lists

Using Custom .woff Format Fonts in Sendgrid: A Guide

Having trouble with implementing custom fonts in Sendgrid. While Google fonts work fine, the custom .woff format font doesn't seem to cooperate. I've attempted three solutions below. Solution number 1 shows up in the Preview tab but not in the em ...

htmlcsssendgrid

Utilizing the Command Line/Window feature within Visual Studio Code

As a newcomer to Visual Studio Code, I'm currently using the latest Version: 1.29.1. When I used Matlab, I had access to a script window for writing code, a Command Window for testing code snippets and viewing variable values, as well as a workspace ...

javascripthtmlcssvisual-studiovisual-studio-code

Text within the div element causes the displacement of other adjacent div elements

When the text in mondaySpecial extends to a second line, it pushes tuesdaySpecial-saturdaySpecial further down on the page, disrupting the layout of the divs. The same issue occurs with other specials as well. Is there a way to prevent this from happening? ...

htmlcss

Switching the color of links when they are focused, without changing it when they are clicked by either a mouse or

Is there a way to change the color of a link only when a user navigates to it using the TAB key and not when they click on it? The simple CSS solution I found was: a:focus { color: red; } However, this also changes the color when the link is activated by ...

htmlcss

choose particular column in every row from the table's header class name

Every <th> in a table has a class, while the <td> elements do not. Is there a way to style all corresponding <td> elements with the same styles as their <th> counterparts using only plain css without any script? Furthermore, since ...

css

Enter the event title in the form to display it

I am looking to create a unique navigation bar form, where users need to enter event.title to access the event show page. Here is an example of how it should appear: https://i.sstatic.net/gpaYo.png The code for the form is as follows: %form.form-inli ...

ruby-on-railsrubytwitter-bootstrapactiverecordbootstrap-4

What is the source of this additional space?

To view my Codepen project, check out this link: http://codepen.io/leongaban/pen/aFJfs I have noticed that the spacing issue is related to the .email-tip-icon and the tip-message classes. When I remove them, the extra space disappears. Even though both th ...

htmlcsspositionspacing

Stylishly Select with Bootstrap 4

Currently, I am utilizing Angular 2 with bootstrap 4 and have implemented the following select element: <div class="form-group"> <label class="col-md-4 control-label" for="OptionExample">Choose an option:</label> <div class="c ...

htmlcssangularselectbootstrap-4

Retrieve CSS content from a file hosted on the local server

Is it feasible to use a locally hosted CSS file for styling a website managed by a server-based CMS? I am interested in utilizing SASS for local CSS development while retrieving the HTML content from a centrally hosted CMS server. ...

htmlcss

Limiting the length of numbers in Material UI

Is there a way to restrict user input to only numbers with a maximum length of 3 in Material UI? <TextField id="score" label="score" className={classes.textField} name="totalScore" margin="normal" defaultValue={score} /> We specifically ...

javascripthtmlreactjsmaterial-ui

Utilizing jQuery to effortlessly generate parent and child elements in a single function call

Is it possible to create multiple elements with the same function? Currently, I am able to split a number of list items like this: <ul class="dropdown-menu"> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> ...

jqueryhtml

Customize Bootstrap4 variables without making changes to the original source code

I have come across several articles recommending editing the _custom.scss file and recompiling Bootstrap. However, I am actually installing Bootstrap 4 via npm. Therefore, it wouldn't be ideal to modify the contents of Bootstrap in the node_modules fo ...

twitter-bootstrapangularnpmsassbootstrap-4

Prevent the bootstrap header in a table from scrolling by enclosing it in

I am encountering an issue with fixing the headers of multiple tables in a page within their dedicated divs. Despite trying various methods, I haven't been successful as the fixed header overflows the div. I want to confine it within the div. Additio ...

jqueryhtmlcsshtml-tablebootstrap-4

What is the best way to display an alert when the button is clicked repeatedly?

Is it possible to keep displaying the alert every time we click the button, rather than just once after clicking it? I currently have an alert set to trigger when a button is clicked, but it disappears after 3 seconds. How can I make it show up again with ...

javascriptjqueryhtmlcss