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;
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 understand that this is a confusing question but I can't think of a better way to word it! Basically, I need a div element to always be 80% of the height of the page, and have the div's width always be the same width as the height (not 80% of the page width, but rather, the same length as 80% of the page's height, so that the div is square.) I've researched quite a bit and have yet to figure out a way to do this. I'm open to using JS but would prefer to use only CSS to accomplish this. Here is essentially how I want my layout to look at several different page heights/aspect ratios:
MY PAGE LAYOUT
The blue div should be 80% of the page height and should always be square.
The reason I need this is because I want the page to never have a scrollbar, so the div must be responsive to the page height, but I also want the div to be a perfect square.
Thanks!
You can use vh -> 1vh being equal to 1% of the height of the viewport's initial containing block.
https://developer.mozilla.org/en-US/docs/Web/CSS/length
So your class would be something like:
.yourClass {
height: 80vh;
width: 80vh;
}
You can declare both width and height in vh units, which represents 1% of the viewport height. In this case, that'd be
div{
width:80vh;
height:80vh;
}
That being said, it's a really bad approach. If the viewport height ever gets bigger than the width (e.g. on any mobile, or a resized window), you'll get horizontal scrollbars or hidden, overflowing content.
For such case, it'd be much better to use vmin, which is 1% of whatever the smaller viewport dimension
div{
width:80vMin;
height:80vMin;
}
Alternatively you can use media queries to detect if the viewport is at landscape (wide) or portrait (tall) mode
#media screen and (orientation: landscape) {
div{
width:80vh;
height:80vh;
}
}
#media screen and (orientation: portrait) {
div{
width:80vw;
height:80vw;
/*or whatever*/
}
}
.equalSize {
width: 80vh;
height: 80vh;
background-color: red;
}
<div class="equalSize"><div>
You can use css build in units. vh = viewport height
https://www.w3schools.com/cssref/css_units.asp
Another option would be to use aspect ratio like explained here: Aspect ratio
I'm trying to make my background image on my splash page resize to smaller sizes. I want the image to cover the entire section whatever size screen it may be.
.splash{
background-image: url("../images/lanternboys_medium.jpg");
background-size: cover;
height: 100vh;
width: 100%;
margin: 0;
padding-bottom: 40px;}
When I view this on my ipad the picture is huge! I've read that others have tried removing the height and width and set background size as "contain" but it doesn't stretch to what I want without the "cover" function.
The current size of the picture is 1366x911 but I do have a larger size of 5184x3456.
Any tips would be greatly appreciated!
Most of the time, vw and vh units doesn't work properly on iOS devices. Maybe if you set your background height to 100% and the background width to auto? Since your height is smaller than the width, it should do the trick.
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.