Question 242773 in Html Question posted in
Some basic documentation can be found here.

Html – Min-width: 100vh is working on mobile, but not on PC with 100% width/zoom

100vh works only on mobile, or if you make the width of the web browser narrower on PC. If you make the window/width at 100%. The image appears to grow too tall, and div class="mars" overflows the viewport.

Can’t post any screenshots. So that’s a bummer.

Here’s the code:

<div class="mars">
                <img  class="mars" src="img/marshero.jpg">
                <div class="greet">
                    <a href="https://solarsystem.nasa.gov/planets/mars/overview/">
                        <p class="inf">Click here to learn more about Mars at solarsystem.nasa.gov</p>
                    </a>
                </div>
                <nav class="menu">
                    <ul class="inline">
                        <li class="inline"><a href="../index.html">▶About me</a></li>
                        <li class="inline"><a href="ProductDesign/index.html">Product design</a></li>
                        <li class="inline"><a href="Research/index.html">Research</a></li>
                        <li class="inline"><a href="ProductDevelopment/index.html">Product development</a></li>
                    </ul>
                </nav>
            </div>

div.mars {
    min-height: 100vh;
    overflow: auto;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

img.mars {
    flex: 1 0 auto;
    max-width: inherit;
    max-height: inherit;
    height: inherit;
    width: inherit;
    object-fit: cover;
}

/* nav */

nav.menu {
    background-color: #f9eae2;
    padding: 16px;
    @media only screen and (max-width: 1050px) {
        padding: 0px;
    }
    
}

ul.inline {
    text-align: center;
    @media only screen and (max-width: 1050px) {
        text-align: left;
    }
}

li.inline {
    display: inline;
    padding-left: 16px;
    @media only screen and (max-width: 1050px) {
        display:list-item;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Screenshot when 100% Screenshot when web browser is made slightly narrower


  2. 0

    To fix this issue and make sure the image doesn’t grow too tall, here is the updated CSS code snippet for your img.mars class:

     img.mars {
flex: 1 0 auto;
max-width: 100%; /* Set the maximum width to 100% of the container */
max-height: 100%; /* Set the maximum height to 100% of the container */
width: auto; /* Allow the image to scale with the container width */
height: auto; /* Allow the image to scale with the container height */
object-fit: cover;

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search