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.
Related
I found this pure CSS slider on GitHub that I want to use but it's not responsive and I need it to be. I've tried changing .gallery .item to width:100% but for some reason the height needs to be set in pixels because % doesn't seem to work and if I don't define a height the slides are not quite visible.
Here's the demo: http://wap9.info/6334
Source GitHub: http://benschwarz.github.io/gallery-css/
As you can see if you reduce your browser's size, the slider height stays the same. Can I make this responsive?
It already is responsive. When I change my browser height and width then the hero/slider changes accordingly and nothing seems to break.
EDIT::
Try to remove the js-autoheight hook class from the hero section.
<section style="min-height: /*some value*/px;" class="js-autoheight gallery items-/*Some value*/">
I'm curious to know how you resolve the following problem.
Using Bootstrap 3 with 24 columns and grid-gutter to 30px.
In wide display, I use col-7 for the sidebar left and col-17 for the main content. The problem is bootstrap is calculating the widths with percentage. So I have 339.5px (29.16667%) for the sidebar, and 824.484px (70.83333%) for the content.
<div class="row">
<aside class="col-lg-7">[sidebar]</aside>
<div class="col-lg-17">[main content]</div>
</div>
Now, I use some scripts like lazysizes and lazyaspectratio to lazy-load my pictures and have the image container kept the same dimensions even if the image is not already loaded. With lazyaspectratio, the width must be 100% to recalculate the height to keep.
BUT... because there is a but... if my main content is 824.484px width, the picture is 824.484px width too, and picture quality is bad. Assuming my picture display must be 824px, the final picture display is shitty and I lost quality, even if the ratio is respected.
My question is : how to bypass this problem with img > width=100% ?
I saw on several threads that people "fix" the width of the row children, like this :
div.row > aside.col-lg-7 {
width: 340px;
}
div.row > div.col-lg-17 {
max-width: 824px;
}
It seems a good solution to keep img > width = 100% and have integer columns width, but with this solution, I must add lot of css rules to manage for multiples col-* and multiples media-queries...
And you ? how do you solve this kind of problem ? Because I think using img-responsive class with width=100% cause quality loss on percentage based width with Bootstrap 3... I'm sure that I'm not the only one to encounter this problem.
Thanks in advance for any suggestion.
Andrejs: You can customize bootstrap at: http://getbootstrap.com/customize/
titouille: You could create a Javascript that rounds the images widths down based on their classes or parents.
For each image element you read in the width of the col or parent and set it (rouded down to 1 px) as it's max-width
I have a container of rows that I'd like to make the container bigger. By default, bootstrap has it at 1200px. I thought that by changing col-md-4 to something like col-lg-4, it would expand the grid but it doesn't for me. Is there a way to expand the grid?
If you don't want to mess around with less variables and just want to increase your container size...make sure your custom css style sheet is called after your bootstrap css so that it isn't overridden and then use a simple css markup in your style sheet such as
#media (min-width: 1200px) {
.container{
width: 1400px;
}
You could even use min-width/max-width properties, or as benja pointed out you could also use container-fluid to maximize your container to the full width of the viewport.
You can use <div class="container-fluid"> for a container that will take the full width of your viewport.
Go to the Customize menu on Bootstrap website and choose your preferred size. In Less Variables -> Grid system you can find a form to input your preferred sizes. Then you can easily download the preferred grid. Hope this will help.
The middle term in col-XX-num corresponds to the screen size that will cause a "break" in your grid so that the items in the grid are responsive. For example, a div with a class of col-sm-4 will take up 4 of the 12 grid cells in a default Bootstrap row until the "small" screen size is noted (in Bootstrap "small" is defined as 750px). Read more about the Bootstrap grid.
If you want to change the width of the Bootstrap container, use this CSS:
.container{
max-width: 1900px;
}
This will make the container wider but will not make your grid bigger. The Bootstrap grid is locked at 12 cells per row. When you use the class col-md-4 as you gave in your example, you are telling Bootstrap to make this element take up 4 out of a possible 12 cells in this row.
Perhaps you will achieve your desired result making your columns take up less cells. Something like col-md-2 then you can use something like col-md-offset-2 to position the column within the row if needed.
Hope this helps!
When resolution lovers my background images are collapses. I tried width 100% but not worked. Here is my page and screenshot of problem.
What should I do to prevent this? a CSS2 way?
add the following class to your div id="navigation">
#navigation {
min-width: 1024px;
}
Do you mean stack down when device width is changing,
use css #media query and set diff percentage width to the container.
Do you want to make the website responsive, a better way is to use a grid system to
achieve it. such as bootstrap3 , jquery-mobile etc.
They wrote the media query for you by default. javascript also can trigger responsive
but it's heavier than pure css.
Because your site isn't responsive (Seriously? This is 2014!) You need to give the body a minimum width large enough to accommodate your content:
body {
min-width: 1030px;
}
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