Content overflowing / overlapping flex items on smaller screens - html

Question

I'm using flexbox and I set each section's height to 100vh.
Whenever, I resize the window, the text from the first section and the last section overflow to the other sections.
.banner, #showcase {
display: flex;
align-items: center;
justify-content: center;
}
.container, .banner {
width: 100%;
height: 100vh;
}
http://codepen.io/mrfishball/pen/oLgLxX

Answer 1

have you tried overflow:hidden; on the sections where the content is overlapping?

Answer 2

.banner, #showcase {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
/**border: 10px blue solid;**/
overflow: hidden; /*or scroll*/
}
And you can control the font size for different device screen sizes. For example:
#media only screen and (max-width: 500px) {
.banner {
font-size: 9px;
}
}

Answer 3

you can just add width : 100% to .content

Answer 4

I've been struggling with the same issue over the past few days, and after hours of Google, trial and error, I have come up with a good workaround for one of your issues. I'm still struggling with the positioning a little so I'm not going to touch on that, but figuring out how to implement fluid typography REALLY helped me with the overflow problem.
I'm not going to try explain it all in detail, because it the resources I'm linking below do a much more thorough job, and there might be information I am unaware of/misunderstood.
The TL;DR of it is that instead of a bunch of media queries, you want the text to fluidly scale to your viewport size. Here are the basic steps, but first, a disclaimer:
Test this out on a sandboxed version of your site if possible. It might take you a while to get to the ideal typographic scaling, and
you will negatively affect your customer experience if every few
minutes the text size changes.
Set your base font size to 100% (either in body or html, depending on how your site is set up)
html {font-size:100%;}
Set your typographical hierarchy in rem (not em) sizes (rem works off the base font size, making the math simpler). For example:
p { font-size: 1.25rem; }
h1 { font-size: 4rem; }
h2 { font-size: 3.25rem; }
h3 { font-size: 3.0rem; }
h4 { font-size: 2.75rem; }
h5 { font-size: 2.25rem; }
h6 { font-size: 1.75rem; }
Add the following two media queries to enable the responsive behaviour of the text, and to settle the size above a specific threshold:
#media only screen and (min-width: 10em) {
html {
font-size: calc(0.875em + 0.25 * (100vw - 80em) / 40); /* 1 */
font-size: -webkit-calc(87.5% + 0.25 * (100vw - 8000%) / 40); /* 2 */
font-size: -ms-calc(0.875em + 0.25 * (100vw - 80em) / 40); /* 3 */
}
}
#media only screen and (min-width: 120em) {
html { font-size: 1.125em; }
}
And Voila! You should have fluid typography! You will have to go through your site carefully and make sure there aren't things overriding your css (bootstrap screwed me for hours before I finally clicked, thanks to the Google Developer sidebar), and that you don't have rogue font-size declarations messing up your pretty layout. If your site is clean and your typography well laid out though, you should be able to carry on just using <p>, <h1> and so on tags, all of which will be fully responsive.
Here are a few resources I found extremely helpful in figuring this out:
https://zellwk.com/blog/viewport-based-typography/
https://www.smashingmagazine.com/2016/05/fluid-typography/

Answer 5

You set this height: 100vh; and that's what's causing the problem. Set it to 100%.
.container, .banner {
width: 100%;
height: 100%;
/**border: 10px black solid;**/
}
I see other answers include adding more viewport height to child elements, but I think that's asking for more trouble. Plus, it doesn't entirely solve the overlapping issue. I usually avoid vh or vw unless it's necessary to achieve something that cannot be done with them; for example, parallax scrolling or side navigation with enhanced entrance and leaving animation.
To achieve a clear cut, bullet proof sections without any overlapping, use height: 100%;
Update: I am not able to comment since I don't have enough points, so I am adding it here. In response to this comment "#StevenKwok, I updated the answer. You can search more about responsiveness and screen sizes", this supports my point, asking for more trouble. If you stick with vh, then you will need to add media queries at certain breakpoints, including small laptop, tablet, and mobile devices.