Tribute Page -Responsive Help


I have run into a bit of trouble when viewing my page on small size and am not quite versed to know how to fix it. My image is fine, I have issues with the text breaks. I’ve done a bit of googling and played around with width but that hasn’t helped, I don’t really know what I am doing and this is my first time coding, at an absolute beginner level.

As an aside, I found the course didn’t go much into tag layout so that is probably a bit of hot mess too.

While I have ticked the boxes as far as the reader, I am not going to be happy until I have solved this problem (with a bit of help)

Tribute Page-Kerry Langlois

1 Like

Could you go into a little more detail about exactly where you are having issues with text breaks?

A couple of things to revisit @Whistler1.

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • Mentioning because you have elements out of order. Everything the browser renders belongs in the body element. Review this for an understanding of the HTML boilerplate tags.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
  • When a test fails click the red button to see which test(s) are failing and text to help you correct the issue.
    • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
1 Like


Thankyou the boilerplate article is helpful, I will go back over what I have written referring to it.

I’ve taken the body tags out and added the meta via the ‘setting’ button but it doesn’t show on my written code now. Is this correct?
Also in settings there’s a tab for creating a classes to html (that will affect the whole document) when I imput a class name, nothing happens, so I am not sure how I would put my CSS styles in using this method. Currently I am using html as a class that applies a background to the whole webpage. Perhaps this is not best practice?

You added the following to "stuff for <head>":

<meta name="viewport" content="width=device-width, initial-scale=1">

I am seeing that in the <head> on your page now. You aren’t?

I definitely see the “pagebg” class on <html>. I don’t see a rule for .pagebg in your CSS though, but I do see a rule for parabg.


No I don’t see it there in the page code (unless its only supposed to sit in the settings )

And I don’t see pagebg (only parabg) so not sure where to enter the styles for this class.
edit: I just changed the name from html to .pagebg, and it works fine.

You won’t see these in the editor window, you will see them in the actual HTML that codepen produces for your page. Use the browser’s dev tools to look at <head> and <html> and you will see them.

Also, get rid of the <!DOCTYPE html> tag from the HTML editor. That is also added automatically by codepen.

Thanks bbsmooth! It’s not easy being new to all of this but between yourself and Roma I have fixed quite a bit in not too long!

Just need to figure out how to resize the text for small screen now, it actually doesn’t look as bad as it did before this post (thanks!), but the h1 and h3 still look pretty uncomfortable.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.