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

HTML

Posted by Mani Saini
Mani Saini
3,101 Points

Responsive Heading

I am not able to make by heading responsive when i am decreasing the browser window?

Billy Bellchambers
Billy Bellchambers
21,689 Points

Providing some code would be useful.

But you would probably need to be using media queries to get this result

3 Answers

Billy Bellchambers
Billy Bellchambers
21,689 Points
Billy Bellchambers
Billy Bellchambers
21,689 Points

Hi Mani,

I have added some basic media queries to your workspace see snapshot https://w.trhou.se/c5ml4dt7sw.

I also renamed your html page to index.html so when openning site it automatically directs to the html rather than getting that strange html folder page you were getting.

I also made the font size smaller as standard and increases with screen size, so it takes a more mobile first approach.

Hope this helps

Mani Saini
Mani Saini
3,101 Points

Hi Billy,

Thank you for adding the media query. When i reduce the size of the screen i can see the fonts getting smaller however words of my heading are still collapsing with each other?

Unsubscribed User
Unsubscribed User
4,918 Points
Unsubscribed User
Unsubscribed User
4,918 Points

http://www.w3schools.com/css/css_rwd_mediaqueries.asp here are some basic rules, what exactly isn't working for you? Post some of you code or explain further so we can help you :)

Mani Saini
Mani Saini
3,101 Points

here is my work : https://w.trhou.se/ygavf69z11

Matthew Wetter
Matthew Wetter
4,640 Points
Matthew Wetter
Matthew Wetter
4,640 Points

Looks like you need to adjust your h1 code.

Try changing these 2 values:

.heading h1 {
float:none;
line-height:0.9em;
}

And is there any reason you're using 100px of padding on the sides of your heading div?

You probably only need something like

padding: 100px 20px;

Especially because your text is centered