I'm using bootstrap and if I use a fixed width and auto margins on container-fluid to center the content it looses the responsiveness.
Is there a way to avoid this? Or the responsive design means there is no fixed width?
HTML
<div class="container-fluid"></div>
CSS
.container-fluid {
width: 960px;
margin: 0px auto;
}
Twitter Bootstrap already have a class to do what you want and his name is "container" he uses fixed widths, but that width is different using media queries rules so it became smaller as the screen get smaller, and when less then 767px that container is 100% of screen size.
Basically, "fluid" and a fixed width are contradictory terms. But there are lots of options. For example, you could set a max-width and min-width instead of just a width. Or your could set a width in ems which still gives the layout some flexibility (especially when combined with % width columns).
Another option is to set your 960px width, but to change that width at different screen sizes with #media queries.
Try to add an id in the div and apply the changes there in order to respect the pre-configured container-fluid class
Related
I made a basic HTMl page with a sidebar and a content area. My problem is my content area is not not positioning correctly across screen sizes. Specifically, the distance between my sidebar and page content is smaller on a small screen than a larger screen. This is despite the fact that my sidebar's width is 150px and i set the margin-left attribute for my page_content to be also 150px.
Here is a screenshot of the smaller screen:
Here is a screenshot of the larger screen:
Here is a link to the fiddle:
https://jsfiddle.net/3ds9jpj4/
How can I edit my css so the spacing is consistent between smaller & larger screens?
Thanks in advance!
You're using Bootstrap container class. Try using container-fluid instead.
<div class="container-fluid">
Instead of Pixel, I think you should go by percentage of screen like 25%, 75%, that will look identical in ratio across all media size.
It's due to this (bootstrap) CSS rule which becomes active above 768px:
.container {
max-width: 750px;
}
just use a different class name, an additional class that overwrites this setting, or an additional rule that overwrites it.
I have a div that is normally set to take up 20% of the page's width, however, on a page where this 20% is not enough to display its content without overflowing, I would like it to take up the minimum amount of width necessary to fit the content. The content is not necessarily fixed-width, so I cannot simply use min-width with a hardcoded value in pixels.
I'd like to do this with pure CSS, if at all possible.
So, what I would suggest is defining a Breakpoint. So you have to figure out on which point your width is not enough, and use a media query to overwrite CSS rules to fit different situations.
So you could do something like this if your page breaks for smaller screen widths than 720px:
#media screen and (max-width: 720px) {
/* ... */
}
Then you can define a new width or min-width inside of this media query.
I want to use media queries to make a responsive website. I have some pages with 2 columns, others with 3 or 4.
For example I have two columns: #colA and #colB. #colA has width 600px, #colB has 360px with a wrapper of 960px width.
I want to use media queries so that if the wrapper has less than 960px, the columns will keep the width proportions between them (which should turn #colA's 600px to 62.5% and #colB's 360px to 37.5% widths..
Is there a way to do this with html/css? If not what are the other (easiest/lightest) options to use with media query?
<div id="colA" width="600px">content1</div>
<div id="colB" width="360px">content2</div>
to convert in
<div id="colA" width="62.5%">content1</div>
<div id="colB" width="37.5%">content2</div>
Using css/html?
Edit1: Yes it is a CMS. The user sets the width values in px by dragging some sliders in the control panel. I need to make the template responsive, so when the wrapper's width is less then 960px, the columns will still keep their width proportions between them.
I think the easiest way to do it is right in your problem statement. Just use the percentage.
#colA {
width: 62.5%;
}
and so on...
Your media query should look something like this, just make sure this code sits beneath the previously assigned styles for #colA and #colB
#media screen and (max-width: 959px) {
#colA{ width:62.5%; }
#colB{ width:37.5%; }
}
I just want to clear out one thing. If I am using "container-fluid" class, it means I can not have something like this in bootstrap.css:
.container-fluid{
width: 1170px;
}
I tried to set in pixels and the responsive nature simply switched off. While setting in % it works. In other words, my question is like this:
How can I set the fixed width of container-fluid? Or was it simply not meant by default by bootstrap developers?
I already read this link:
Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap
But simply can not find anything there regarding the responsive nature and fixed width with container-fluid.
setting a px width is making it static, you would have to employ a different technique to make it responsive after that like javascript that is why a % is used.
If you are wanting to make the container not go wider than 1170px use
.container-fluid {
max-width:1170px;
}
max-width will make it so if the users screen is wider than 1170px the container will go only up to 1170px wide. This will make it so the responsive mechanisms will still work.
Of course using .container-fluid as the selector will change how all container-fluid elements act so think about adding a second class to that element and setting the style to it.
html
<div class="container-fluid maxWidth"></div>
css
.maxWidth {
max-width:1170px;
}
If you are wanting the container to be fixed no matter what, that will make the contents inside non-responsive as they would not be able to tell when the screen has changed size as the container would not change size.
I have created a Website design using Bootstrap 3. But I have not used .container block as the layout needs to be of 100% width. But when we re-size the browser, it should resize the layout width upto 1024 pixels only. Even on Mobile screens, the width needs to be 1024 pixels. How can I do that?
Use the min-width CSS property and set it to 1024px. That will make sure your website is always at least 1024px wide.
If you are using row and span classes then it will be responsive. That's what bootstrap does. If you don't want it to be like that then I'd recommend not using bootstrap. Unless I'm misunderstanding you.
OK I got it done myself, I just had to do all col-md to col-xs and min-width of page wrapper to 1024px.