Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialPawel Ellwart
12,993 PointsText overlaps to the content
Hi All,
I've created my own workspace and trying to use skills from previous lessons. I have a <header> element with a <span> element inside.
When the resolution changes (e.g. on a mobile device) the text from <span> element overlaps the below content (also text). Any ideas how to deal with that?
SRIMUGAN J
Courses Plus Student 5,345 Pointscan you please share the screenshot or any code for this to view in detail?
3 Answers
Steven Parker
231,198 PointsThis is happening because the CSS is constraining the height of the main-header element to 650 pixels, and on a narrow display that's not enough for that span.
An easy fix is to remove the height
setting and add a little margin or padding at the bottom to create the same look instead:
.main-header {
text-align: center;
/* height: 650px; */
background-color: red;
padding-top: 170px;
padding-bottom: 120px;
}
Pawel Ellwart
12,993 PointsThanks Steven!
I have removed the height, added padding and it doesn't overlap :) Once again thank you for your help!
Pawel Ellwart
12,993 PointsSRIMUGAN J
Courses Plus Student 5,345 PointsHi Pawel,
The issue is in your css, actually you set the height for the header as 650px, try to avoid set the height property unless it must needed. Here in your code, the span contents were too large. While the size of the window reduces, the content size remains unchanged caused the overlap. If you want the height must be there, it produces unexpected results like these.
just remove the height property from the "main-header" class your output 'll become fine
Hope this helps,
Pawel Ellwart
12,993 PointsIt helped!
I have removed the height property and now the text doesn't overlap, I'm only wondering how to create space below the span element, I've added padding and it looks fine. :)
Steven Parker
231,198 PointsSteven Parker
231,198 PointsTo facilitate an accurate analysis and specific answer, make a snapshot of your workspace and post the link to it here.