Tribute Page: Suggestions for H1 line-spacing?

Code Feedback
1

Hello friends,

I am coming along with my Tribute Page. I have primarily been focusing on utilizing the CSS grid system, but one thing I have questions on is the H1 header line spacing.

As you can see, there is quite a bit of space between the H1 and H2.

Does anyone have any suggestions on how to make that gap smaller, while not making it unreadable if the text wraps down to the next line?

Also I have CSS for the image to round the corners, but it doesn’t seem to be picking up on that? I am not quite sure why.

Here is the codepen.io link as well: https://codepen.io/TierneyS/pen/OabQZP

2

Hi Tierney,

Your page looks great! Good job with the grid layout. You can try changing the margin on the H1 selector to something like:

margin-bottom: 0;

That should cut down the distance between H1 and H2. The H elements have a default amount of margin that is automatically applied by the browser, so once you override that, you should get the result you’re looking for.

For your image, you can add this to your #image selector:

border-radius: __px;

Hope this helps! Keep up the good work!

1 Like
3

Thanks, Nick!

The margin trick worked out perfectly. I have a grid gap on the whole thing, so H1 and H2 aren’t sitting quite next to each other but it is a close thing.

Still having trouble with the picture, but I am not sure I am going to sweat it too much. :woman_shrugging:

4

You have a typo:

border: 100px soild black;

Should be:

border: 100px solid black;

But this won’t make round corners, for that you need border-radius.

1 Like