I wonder if there is a way to prevent full width layouts from stretching on large screens. An example for that is mashable.com, on my screen (13 inch) the layout is in full width. If you try to zoom out the page, you will notice that the layout is not full width.
This is how the layout appear on small-medium screens:
And the below image is for larger screen, notice that it's not full width now:
Another example, the below design is a full width layout, I want to prevent stretching it out when viewing it on wide screens.
Any thoughts on that please? How can we achieve it in Bootstrap 3
Thanks,
Add a 'max-width' to your container/wrapper. For example:
.container {
width: 100%;
max-width: 1550px;
}
In this example the website would appear fully 'stretched' across the screen until the screen dimensions exceed 1550px wide.
See a scaled-down demo here
By default Bootstrap uses a 1140 pixel grid, see http://getbootstrap.com/css/#grid. Simply adding a .container around your content makes sure that content will never grow larger.
It's possible to customize the maximum size by creating a customized version of Bootstrap using http://getbootstrap.com/customize/ or by compiling Bootstrap yourself and setting the #container-large-desktop variable
Use max-width to stop getting 100% width on larger screens:
div.container{
margin: auto;
padding: 0;
width: 100%;
max-width: 1024px;
height: auto;
}
Related
I have been reading stack overflow for some time but this is my first post!
I have this website: https://oliv-collection.com/.
The banner on top is full width as long as the screen you view it with has a resolution of less than 1600px (the original picture width). Once the resolution is greater than that, the banner does not cover the entire width of the page.
Is there an easy way with CSS to make the width and height increase so as to cover the full width? I have been fighting with Google Inspector but can't figure out what to do!
Thanks
There might be better ways to do this, but I managed something close to what you ask for by changing the styling of the banner images to the following:
.slick-slider .nm-banner img, .nm-banner img {
display: inline-block;
width: 100%;
}
What I did was replace width: auto; to width: 100% to make the image resize correctly, and remove max-width: 100%; and height: auto;. With my change, the banner image will increase with the width of the screen even above 1600px. This works for me in Safari on macOS.
You should use
width: 100%;
Whatever the width of the screen is, the banner will be with maximum width.
Set the margin of the HTML body in CSS to 0.
body {margin: 0;}
I'm using bootstrap and I made a nice website. At the end I wanted to center it and make some ad space on the sides, so I used this:
#wrap {
width: 1200px;
margin: 0 auto;
}
My website was fully mobile responsive, the navbar turned into a buttton and the post gradually got more stacked as opposed to being in a grid (it's sort of like a news/magazine type of thing)
How would I go about centering it while keeping it responsive, to make it look better/make ad space on the sides?
Try width 100% and height 100% instead of fixed pixels
You may want to use max-width as by using width you are stating that it is always 1200px wide (regardless of the device width).
The max-width property is used to set the maximum width of a given
element. It prevents the used value of the width property from
becoming larger than the value specified for max-width.
If you put fixed pixels, this size won't vary when the screen size shrinks. You can try adding media queries that change that fixed width. For example:
//for screens smaller than 600px, adapt the width to the full width of the screen
#media only screen and (max-width: 600px) {
#wrap {
width: 100%;
}
}
Try giving % instead of using px to width.
#wrap { width: 90%; margin: 0 auto; }
I have the following markup: (simplified)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
<body>
<div class="wrapper">
<div class="content"> (absolutely positioned stuff) </div>
</div>
</body>
with the following styles:
.wrapper {
width: 100%;
height: 100%;
}
.content {
width: 640px;
height: 640px;
margin: 0 auto;
position: relative;
background-color: orange;
}
On a desktop (screens larger than 640px x 640px) my square is top and center, which looks good. On mobile portrait, my square is top and fills the width, which is also good and perfectly acceptable. On mobile landscape (screens less than 640px tall), however, my square fills the entire width and the user will need to scroll to see the bottom of the square, which is not acceptable.
What I'd like to achieve is for the square to fit the height of the screen so it can be seen in its entirety in landscape view. I'm trying some media queries out now to see if that helps. Otherwise, what would be the best way to achieve this?
I've tried changing .content to height: 100%, but because most of its contents are absolutely positioned they end up having 0px height. As such, ideally the square should still be 640px x 640px in size, just scaled to fit the screen so the contents can stay put.
Thanks.
This is the ideal case for viewport units. Where 100vw is the the width of the viewport, and 100vh is the height of the viewport.
You should be able to find some more information on the different units here.
One thing to note though, is that using height related viewport units can lead to some odd effects on Mobile Safari and Mobile Chrome, because the viewport height can change on scroll. The various behaviours of Chrome and Safari on mobile with regards to this have changed over the years as they try to figure you out an ideal solution. I find if I need to rely on vh units I often use a little bit of javascript or css to then "lock" the object at that height on mobile.
You can find other tips for that issue if you run into it in this Stack Overflow Post
Say I have a 400 px wide and 250 px high image. The user resizes the screen or loads the page on a smartphone.
Say the screen width is 320 px wide. The 400 px image won't fit.
Is there a way to automatically resize the image (and keep proportions) when the screen is not wide enough, using CSS?
In other words the image should be resized from 400px wide to 320px wide (for example).
Use
max-width: 100%;
Google responsive images for more information.
http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
No need to use mediaqueries for this specific case: just define
#yourimage {
width: 100%;
max-width: 400px;
}
this will ensure a full-width image for every viewport width up to 400px
You need to specify both min and max:
demo: http://jsfiddle.net/abhitalks/Vv9RT/
css:
img {
min-width: 220px;
max-width: 420px;
width: 100%;
}
Try changing the panel size in the fiddle. min-height will ensure a minimum acceptable size when the screen size gets too low. max-height will ensure a maximum size so that it doesn't get huge.
100% width will keep it within bounds.
by using the css3 media queries u can do make possible
ex: #media screen (max-width:480px){
img{
width:320px;
}
}
or
img{ max-width:100%}
or else you can use both.. 'img{ max-width:100%}' place before the media quires
I need some CSS code to make my site fit the whole screen in different resolutions, however if screen goes too small, stop resizing and become scrollable. I've tried using a div covering the whole screen, and then setting width and height to 100%, with min-width set to 800px and min-height set to 600px, but its not working. Any ideas?
PS: Solution must be pure HTML/CSS, JavaScript is not possible for me now.
Try this:
http://jsfiddle.net/6CpbZ/
width: 100%;
height: 100%;
min-width: 500px;
min-height: 500px;
The concept is making the width or height or both 100% and then defining a min-width or min-height.