I'd like to use #conA as a hero section and have #conA's height to fill the entire viewport (so #conA height:100vh). It's working correctly on tablet, but on laptop, it looks like #conA's height takes up much more than viewport.
Son on tablet it looks correctly: enter image description here
But on laptop, it looks like: enter image description here (note that I tried putting a blue border to #conA, and it's way taller than viewport)
What I'd like it to look like instead is this: enter image description here
Is there a way to fix this?
<section id="conA">
<div class="container">
<div id="heroText">
<div id="text-fixed">lorem ipsum</div>
<div id="text"></div>
</div>
<div id="images"></div>
</div>
</section>
#conA {
height: 100vh;
}
#conA .container {
margin-left: auto;
margin-right: auto;
display: block;
}
#heroText {
color: #56525E;
}
#conA #text {
display: inline;
}
@media (min-width: 600px) and (max-width: 959px) {
#conA .container {
width: 70%;
}
#conA {
min-height: 800px;
position: relative;
}
#heroText {
line-height: 1.7;
font-size: 28px;
text-align: center;
position: absolute;
width: 70%;
top: 20%;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#conA #images {
text-align: center;
position: absolute;
top: 35%;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
width: 90%;
}
#conA #images img{
width: 13em;
height: auto;
}
}
It feels like there is more to it than you have provided. However, my observations are as such
height:100vh
try using max-height: 100vh
. It would limit your #conA to 100vh only.<meta name="viewport" content="width=device-width, initial-scale=1.0">
added inside your tag.Finally, it very much depends on type of screen. The Pixel DPI (density per inch) for your Tablet may be something very different from your system. Read more about Pixel density here: https://material.io/design/layout/pixel-density.html
do you really need a @media? here is your simplified code with flexBox. is the rendering as expected?
#conA {
height: 100vh;
border:blue 5px solid;
}
#conA .container {
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#heroText {
background: red;
line-height: 1.7;
font-size: 28px;
text-align: center;
width: 70%;
margin-top:20vh;
}
#conA #images {
background: yellow;
text-align: center;
margin-top: 1em;
width: 100%;
}
#conA #images img{
width: 13em;
height: auto;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.