CODEWITHSUNDEEP
css
lyx
lyx

Reputation: 63

Making my site responsive for shorter screen

I have the following basic layout

#sectionOne {
  height: 100vh;
  overflow: hidden;
}

#sectionTwo {
  height: 100vh;
}
<section id="sectionOne">
  some content here
</section>

<section id="sectionTwo">
  some content here
</section>

I have been able to set the font size of the content in section one to be responsive according to different screen widths.

However when the screen is wide enough but the height is relative shorter like surface laptop vs mac book air, I cannot see the full content of my section One, because it overflows. Is it because I am setting the height to be 100vh?

I am actually a little bit confused here, if I am setting both of the sections to be of height 100vh, isn't that conflicting since apparently one of them cannot be 100vh if the other one is already 100vh?

Upvotes: 0

Views: 34

Answers (1)

KalebG
KalebG

Reputation: 26

The reason the text overflows is due to setting a height. An easy fix would be to change height to min-height...

With min-height when the contents approach the boundary instead of flowing outside of they will instead make the parent element bigger, in this case the sections #1 and #2

Upvotes: 1

Related Questions