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

Posted by sr01
sr01
2,637 Points

Hello. How can I make my h1 element extend to the same width as my h2 element so that it looks like a text lockup?

If you use these headlines as an example:

<h1> SAY HELLO </h1> <h2>TO THE GREAT TASTE OF FOOD </h2>

Obviously the h1 element will need to be very large so that it covers the length of the h2 element which has more text.

would really appreciate the help.

2 Answers

Kristopher Van Sant
Kristopher Van Sant
Courses Plus Student 18,830 Points

I'm not sure what the best way to get the Text Lockup look is, but you can definitely change the size of the headers in your CSS using font-size, and, just as you mentioned, make the h1 larger so that it is as long as the the h2.

Here I gave the h1 a larger font-size of 66px and then adjusted the bottom margin to bring the h2 up closer to it. http://port-80-8soucs96m5.treehouse-app.com/

I'm sure there are other ways of achieving this look as well though. Hope that helps a little!

sr01
sr01
2,637 Points

Hi there,

I appreciate your time and effort for helping me resolve this issue. I cannot however seem to get your link to open up, its says "workspace unavailable". I would really appreciate being able to see it to help your solution become clearer in my mind, although what you have said does make sense and I am trying to apply it now.

Very thankful,

ssrdev677 (Stephen)

Kristopher Van Sant
Kristopher Van Sant
Courses Plus Student 18,830 Points

Hello!

Sorry about that link not working, I wasn't sure if it would still work after I closed my workspace and I guess that proves that it doesn't! Anywho I made a snapshot of the workspaces https://w.trhou.se/wmdiio6ck6 and you should be able to fork it to your workspaces and do a preview, this way you can see the code too. I"m not sure if this is exactly what you are looking for though, if not I can dig around and try and find a better answer for you.

sr01
sr01
2,637 Points
sr01
sr01
2,637 Points

Thats fantastic thank you. Seems to be exactly what I was looking for and works perfectly as you described.

I have a feeling it'll need some tweaking for staying in the lockup format for responsive mobile (as things moved slightly when I scaled the page down) but I'll cross that bridge in due course :)

Thank you very much.

ssrdev677 (stephen)

Kristopher Van Sant
Kristopher Van Sant
Courses Plus Student 18,830 Points

Awesome!! No problem :) Ahhh yes making it responsive would be the next trick. Hope it all works out for you! Have fun playing with the code and experimenting!