I am trying to make the following webpage responsive but when I adjust the screen height the logo image gets cut as I decrease the height of the screen.

I am unable to find the common ground where I can set the logo image as full view and set some padding around the logo so that it doesn't get stuck to the top screen.

Below is the GIF image that describes the issue:

body {
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

img {
    height: 5em;
    width: 5em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}

div {
    background-color: #FFF;
    padding: 2em;
}

<section>
  <img src="https://i.postimg.cc/G3WCmqLQ/icon.png">
  <div>
    <h1>Welcome</h1>
  </div>
</section>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Add height: 100% to section

body {
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

section {
  height: 100%;
}

img {
    height: 15em;
    width: 15em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}

div {
    background-color: #FFF;
    padding: 2em;
}

<section>
  <img src="https://dummyimage.com/300">
  <div>
    <h1>Welcome</h1>
  </div>
</section>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

What you need to do is just change css of body from display: flex; to display: inline-grid;. Hope this will solve your issue.

body {
            background-color: black;
            display: inline-grid;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            width: 100vw;
        }

        img {
            height: 5em;
            width: 5em;
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 1em;
        }

        div {
            background-color: #FFF;
            padding: 2em;
        }

And HTML is;

<section>
        <img src="https://i.postimg.cc/G3WCmqLQ/icon.png">
        <div>
            <h1>Welcome</h1>
        </div>
    </section>