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.
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 creating a site using bootstrap.
I would like to prevent the window from resizing at all from a certain point and downwards.
I currently have it set at:
html, body{
min-width: 300px;
max-width: 3000px;
min-height: 550px;
max-height: 1500px;
}
seems to work perfectly for the width, once the window reaches 300px in width, the width of the window locks and cannot be scaled down any further.
for some reason though, it will not work for the height, no matter what parameters and dimensions I set, I can fully scale the height of it.
Not sure how to work around this so that once the window reaches 550px of height, the height also locks and cannot be scaled down any further.
Any help would be appreciated. Thanks!
thats not an an issue, actually what you are saying, is device width not the document or window width, if you are worried about responsiveness, no device exist on the world whose height can be changed, atleast i dont know,
this should not be an issue, you are scaling the browser's(device) height and width , but the actual window sizing is working same like the width, ,,
i mean that css code is working fine, but you cannot notice that,
It's because max-height overrides height, but min-height always overrides max-height. So you can't use them in the way you intend.
You need to target with media queries:
body { height:550px }
#media (min-height: 550px) { body {height: 100vh }}
#media (min-height: 1500px) { body { height: 1500px }}
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 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;
}
I am developing responsive site and have maybe a common problem, but i couldn't find the answer and need your advice. I want browser window fix on height:500px on mobile screen. Now i have this situation (look at the pic). I need to avoid white color below and want my container fit the whole screen and height not more then 500px.
Thank you for any advice!
Set Your container height and width to 100%.
#container
{
height : 100%;
width : 100%;
}
if you dont want your height to be more than 500px, you can use max-height property.
max-height : 500px;