The main content column of my website is too wide for 1920x1080 resolution, so I'm trying to limit the size by using the max-width property, but when I do that the column is no longer centered. So every time I reduce the maximum width (let's say from 1600 to 1400px), the main content gets "chopped off" on the right side instead of being centered. Here's screenshot to demonstrate:
Note: I can't use margins for this because it will make the column too small on lower resolution devices.
Add the following CSS:
margin: 0 auto;
This sets the margin-left and margin-right properties to auto which centers a fixed width element (such as your max-width element).
Now, as for lower screen stuff, you should try to reset the margins on lower screen devices with a media query.
Related
I was reading an article explaining the css properties width and max-width and came across this example:
img {
width: 100%;
max-width:700px;}
This says that the fixed width of the image, should take up the entire size of the parent element — if the width of the parent element is explicitly stated, — all hundred percent of it, yet the image should never exceed 700px. It means that the image can be less than 700px, if that suits its situation better (e.g smaller window size) but it should never be more. So there are two conditions here, that the width of the image can be 100% of the parent element if it wants to but it must not never be more than 700px.
But isn't it unnecessary to add the width:100% here? Doesn't max-width:700px imply that the width will be 100% if the parent is less than 700px anyway?
First, width defines the width of a specific element while max-width define the maximum size the element is allowed to have.
Second, width:100% use the parent's width to calculate the current width value whereas max-width:100% use its own original width to calculate the maximum size. So, the image with width: 100% could be larger its original size (scaled base on its parent width). On the other hand, the image with max-width: 100% could be smaller but never be scaled larger its original size (maximum valid width = 100% x original width). That's why it's called fluid image.
Let's say you put width: 700px for an image. When you re-size your screen the image stays stably 700px. Let's say you on a mobile phone and its screen width is less then 700px the image will not fit in the screen. So it will stretch out your page and make it not mobile-friendly. At the same time, when you set max-width:700px it will re-size up to 700px but when the screen goes smaller and the images don't fit in the screen it will automatically re-size it to fit the screen.
As far I understand you want to get the image fit to the size of its parent container with the constraint of not exceeding the width of the image more than 700px.
Then I will say yes it is unnecessary to give "width: 100%;" either way default value for width will get selected i.e. "auto".
Because of this whenever your parent container will be smaller than 700px, your image will fit your container (since "width: auto;").
P.S.-Please refer "object-fit: contain" property of CSS, as that will also help.
I am just starting with Bootstrap and going through docs. Right now, seems very confusing and have some queries as follows:
In the Grid Options table, why the container width is always less than device width, why not equal to device width for e.g.Small devices Tablets (≥768px).
How the width 750px is determined, why not 743px or 755px or any other size. How did they determine that 750px as container width.
As given, bootstrap scales up to 12 columns with gutter between columns and each column width is
~62px and gutter is 30px (15px on each side) therefore
(12(cols)*62px ) + (11(gutters) * 15(width)) equals to 909px instead of the given 750px container width. Why ?
This is all is very confusing to me. Could someone plz show how the container widths are calculated for different breakpoints and why the container width is not equal to device width ?
Thanks
dk
The Bootstrap .container is used as a centered container, if you want full-width on all devices use .container-fluid
The 62px is actually 62.5px at the small breakpoint. 62.5 x 12 = 750px, and this includes the 15px padding around each column. The gutter is within the column since padding is used (as opposed to a margin where the gutter would be outside the column).
Here's a nice visual demo: http://www.codeply.com/go/Sul9kw8Kne
Aside from the container width, take a look at this article about the BS3 grid
First of, If you want a container to equal to device width use
container-fluid instead of container
For the Grid system there are two concepts
Boxed layout (.container provide this)
wide layout (.container-fluid provide this)
in bootstarp there is no pixels for grid every thing in in percentage (%) only.
all media quire break points are setup through bootstartp it self you may change those values through bootstrap customizer http://getbootstrap.com/customize/.
If my browser is sized to be 992px wide, then .container has a max-width of 970px. If my browser is sized to be 991px wide, then .container has a max-width of 750px. Why is there this big jump in the max width? Why not just have a max-width of 1170px or so with 20px of margin on each side or something so that as you resize your browser window the container width scales smoothly instead of having a big jump?
E.g. at 992px screen width I have only very little margin on each side (11px). Yet at 991px wide I have 120px of margin on each side, which means nearly 25% of the screen real estate is empty margin on the sides. This doesn't make a lot of sense to me. Is there a reason this was done? Can I remove this behavior of preferring certain container widths without breaking things?
The official answer from the Bootstrap folks:
What it boils down to is that designing for specific breakpoints is
easier (in my mind) than designing for unlimited, unknown sizes. The
alternative you mention isn't wrong or bad, just different. I'd rather
us maintain the tiers with very specific ranges
This is because fixed-width + margin = break point. In bootstrap the margin grows while the container remains at a fixed width. When the browser is res-sized past break-point the container jumps just below break-point.
This is how Bootstrap and its grids work. Bootstrap defines 4 grids, see this table. Depending on screen size, one of these four grids will be used. 992px screen width is the breakpoint between the small and the medium grid.
Grids fit horizontally and scroll vertically as we are used to. For this reason the smaller grid will be applied below 992px.
The maximum container width can be "calculated" by finding which width can contain 12 equal-width columns plus any gutters. For the small grid 12 x 60 makes 720. The padding is constructed of 15 pixels on both sides of the column, minus 2 x 15 pixels on the outside of the grid. Those missing pixels (constructed with a negative margin) make 720 + (2 x 15) = 750.
750 px seems very small in relation to the 991px your mentioned. The small grid is intended for use on devices with a screen width of 768px and the medium grid for screen widths of 992px.
I used
.container {
max-width: 100%;
}
in Bootstrap 4, and that removed it for me. Be careful applying that globally though. You can do this for specific containers instead:
.container.some-specific-class {
max-width: 100%;
}
<div class="container some-specific-class">
xyz...
</div>
Thanks to Dorian for the initial tip.
I've got these boxes that pop up that's fine its when the screen size reduces they start overlapping each other. I would like to keep constant spacing between the boxes and stop text from running out the box is this possible?,,
You have to use the min-width CSS Property to prevent overlapping.
For Instance,
#abc, .abc{
min-width:800px;
}
The min-width property allow authors to constrain content widths to a certain range.
SOURCE
What the above example does is that if your window for instance reaches a minimum width of 800px, it gives you a horizontal scrollbar at the bottom which fits your content to a minimum range of 800px.
Hope this helps.
PS: #abc, .abc is a dummy name for the div id or class that you have for which you need to set the min-width to prevent overlap. You can replace this with your id or class. Similarly 800px is an illustrative value which you can replace with your desired window width.
We have been provided a 1500px wide image that is a mockup of a website.
The website design is a fixed width design, where the design takes up the middle 990px of the image. So the 255px on either side of the image is just overhang to show how the site would expand to bigger viewports (ie, it wouldn't aside from some edge elements expanding to infinity).
What I would like to do is simulate this with the image (up as far as it will go). So if the viewport is 1500px, the image would start at 0,0.
If the viewport was 990px or less the image would start at 0,255px.
Anything in between would scale. So I would like to scale a negative margin from -255 to 0 depending on the width of the viewport.
Kind of like the opposite of
margin: 0 -10% 0 0;
This goes in the opposite direction to what I am thinking - as the viewport gets wider, the image migrates to the left instead of to the right.
In your stylesheet you could try using some responsive design techniques,..
#media screen and (max-width:1500px){
#yourContainer{margin-left:0;background-color:#afa;}
}
#media screen and (max-width:990px){
#yourContainer{margin-left:255px;background-color:#aaf;}
}
background color added for testing only ;)
This jsFiddle demonstrates this, just resize the browser window or the fiddle column width - http://jsfiddle.net/vs6uz/1/