CSS Viewport issue: vh vs. 100%
I code a responsive Website with HTML & CSS. I use the Bootstrapper framework.
My issue: when I use 100% for a background image, the image will not reach the end of the page on Desktop screens (because the image scaled with 100% height is smaller than the monitor resultion). On iPhone (Safari) it will look nice. The footer will be underneath the image.
When I use the Viewport-value 100vh the result on the Desktop Screen will look nice (Image will fill the background), but on mobile Devices (iPhone), the text will overlap the footer. Looks horrible.
I looking for a solution like: on Desktop use 100vh, on Mobile use 100%. Is that possible?
HTML-Code:
<section id="myid">
<div class="myclass">
<div class="container">
<div class="row">
<div class="col-md-8 opaline">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<p>Great Content</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-10">
<p>Great Footer Content</p>
</div>
</div>
</div>
</footer>
CSS: (OK-Result on Mobile Browser)
.myclass {
/* The image used */
background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
padding-top: 36px;
}
CSS: (OK-Result on Desktop Browsers)
.myclass {
/* The image used */
background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
padding-top: 36px;
}
I also played with the calc function - with no success:
height: calc(100vh - 000px);
000 = height of the footer
I looking for a solution like: on Desktop use 100vh, on Mobile use 100%. Is that possible?
if thats what you looking for, you can use the - @media CSS at-rule -
The @media CSS at-rule can be used to apply styles based on the result of one or more media queries, in your case the screen size.
read more mdn doc
edit : found something that might be relevant css-tricks
I applied what was on css-trick on the code you provided code
@media only screen
and (min-device-width: 1000px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
.myclass {
/* The image used */
background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
padding-top: 36px;
}
}
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
.myclass {
/* The image used */
background: linear-gradient(rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1));
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
padding-top: 36px;
}
}<section id="myid">
<div class="myclass">
<div class="container">
<div class="row">
<div class="col-md-8 opaline">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<p>Great Content</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-10">
<p>Great Footer Content</p>
</div>
</div>
</div>
</footer>Edit -2- : from the answer you replayed :
Desktop Screen (1920x1200px resultion)
and in the code you posted you used
@media only screen
and (min-device-width: 1000px)
and (max-device-width: 1600px)`
try to change the 'max device width' query value to the wanted resultion - 1920px (and up)
Edit -3- :
as you just replied in your solution, because the desktop view is the default one, removing the resolution pixel range completely from the desktop media query will might do the trick