Could I have feedback for my tribute page project?

Hi everybody! I was wondering if anyone could take a look at my Christopher Marlowe tribute page. I would very much appreciate feedback.
Tribute
There is one issue I’m having: the page seems responsive up until the size gets down to 265 px or so. After that a horizontal scroll bar appears. I thought it might be the title, but I have the font-size set to a percent, and I thought that would make it automatically responsive.
Thanks in advance!

Welcome to the forums @Batsand. Your page looks good. Some things to revisit;

  • The test script, with all tests passing, should be included when you submit your projects.
    • Your page passes 9/10 user stories. 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.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not include the style tags in the CSS editor. The editor is the equivalent of an external stylesheet. You would not put HTML tags in CSS. Having them here will cause problems.
3 Likes

Okay, thank you for the help!
I submitted and passed it a while back, so I didn’t even think to check if the tests still worked :dizzy_face:
I think I’ve fixed the problem with not passing the img test, removed the style tags, and added the test script.
The HTML problems are a bit more involved-it seems like the main problems came from using tags in a way they weren’t meant to be used. But I’ll work through that.
The error message definitely confuses me. I made an error so I could look at a message again. This is what I got.

Try using the "max-width" style property : expected 'none' to not equal 'none'
a@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:106:477
FCC_Global</e.exports/o.prototype.assert@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:534:1366
c@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:549:1889
u@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:431:130
FCC_Global</e.exports/n.notStrictEqual@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:574:736
test/</</<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:608:102003
r/Tg.prototype.run/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:259211
r/Tg.prototype.run@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:259506
r/Qg.prototype.runTest@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:274414
i/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:275350
o@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:273767
o/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:273838
o@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:272586
r/Qg.prototype.hook/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:273652
xy@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:599:14311

I think it’s calling the test bundle, but I have no idea what the numbers at the end mean. Is that lines of code? What’s the second line doing at the start-calling the test bundle? But then why does it change from a@https to later, on other lines, u@https and then u@https? Many more questions but I think that’s a good start.

Yes, the W3C validator will ensure that your syntax is correct. Pretty much the errors tell you what needs to be corrected.

I’m not sure what you did to create this error or to see it.
From reading the first line it pretty much tells you what the error is. The test is looking for a max-width property and isn’t seeing it.
There’s a lot of info in a stack trace that you do not need to be concerned with. When one of the test from the test script fails the first three lines will inform you of what fail, what it’s looking for and how to fix it.

Okay, thank you.
I made the error as a test so I could see the message again. I just commented out the CSS rules for images so that the responsive image test would fail. The rest of the message, the stack trace, was what I didn’t understand. I thought you meant I should understand that too.
But if I don’t need to bother with that, that’s fine!

Thank you a bunch for your help, I appreciate it.

300% in this case means three hundred percent bigger than the parent’s font size, which in this case is 300% bigger than 1rem. So if I’m viewing your page with a default font size of 16px then the font size of the h1 is 48px, regardless of the width of the browser. So once you get the width down to around 256px then you will get a horizontal scroll bar because the name “Christopher” becomes wider than the view port width.

There are several ways to handle this. You could lower the percentage on the h1 for narrower widths using a CSS break point. You could add the &shy; entity between “Christ” and “opher” so that the name will break at that point if there isn’t enough space for the entire word to display, and it will automatically add a hyphen after “Christ”. You could use CSS to make the name wrap but you might not get as nice results as you would using &shy;.

At some point you will run into this problem with the last name too, so probably the best solution is to lower the percentage for smaller view ports and then add &shy; to the first name just in case. I lowered it to 150% and was able to narrow down to around 130px before the last name started to become an issue (I added &shy; to the first name).

Do I think you need to make sure you are completely responsive with no scroll bars down to 130px width. Unless you have a very specific reason to support such a narrow view port probably not. I think people who would be viewing your page with a device that narrow are probably used to scroll bars :slight_smile:

Actually, before I got to 130px something else on your page created a horizontal scroll around 180px. I’m guessing it might be the date range headings. If you get rid of the left padding on the lists at narrow view ports then that should help.

Speaking of lists, you aren’t supposed to have <h2>s in there like that. The only direct children in a list should be <li>s. So just move those h2’s inside the <li>.

2 Likes

Thank you-this was very helpful.

I never knew about ­ before, so that was cool to learn. And I get how the percentage works now. I’m passing the validator now, so hurray!
I had no specific reason to make it responsive down to 130px :grinning_face_with_smiling_eyes: I just didn’t know at what point I should stop worrying about it.

1 Like