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 trial

CSS CSS Selectors Selectors - Beyond the Basics Attribute Selectors

Posted by Pawel Ellwart
Pawel Ellwart
12,993 Points

Text 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?

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

To facilitate an accurate analysis and specific answer, make a snapshot of your workspace and post the link to it here.

SRIMUGAN J
SRIMUGAN J
Courses Plus Student 5,345 Points
SRIMUGAN J
SRIMUGAN J
Courses Plus Student 5,345 Points

can you please share the screenshot or any code for this to view in detail?

3 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

This 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 heightsetting 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
Pawel Ellwart
12,993 Points

Thanks Steven!

I have removed the height, added padding and it doesn't overlap :) Once again thank you for your help!

Pawel Ellwart
Pawel Ellwart
12,993 Points
Pawel Ellwart
Pawel Ellwart
12,993 Points

Hi Steven and Srimugan,

here you can find the snapshot:

https://w.trhou.se/fz03frqxz3

SRIMUGAN J
PLUS
SRIMUGAN J
Courses Plus Student 5,345 Points
SRIMUGAN J
SRIMUGAN J
Courses Plus Student 5,345 Points

Hi 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
Pawel Ellwart
12,993 Points

It 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. :)