RWD Certification: Product Landing Page Project - Steam turbines

I finally finished my product landing page project. If you can and will, please take a look at it for final feedback before submitting it.

EDIT: the following issue is fixed now, see my post below for further information.
There’s one issue I’m aware of: responsiveness breaks below 560px width. I managed to fix it as stated in my previous post, but as I continued editing the bug appeared again and I just can’t work it out at this moment.

I suspect it still has something to do with the flex layout, some HTML element (in the #pricing section or lower) isn’t being resized below a minimum width of 560px, so a horizontal scrollbar appears for viewports below 560px width.

Here’s a link to my CodePen project:

The 560px issue is solved! I was styling wrong my footer. Well, not actually wrong, but I was giving it a fixed height that was breaking the flex behaviour. The W3C CSS validator was of great help! I use CodePen’s built-in validator a lot, but it seems to miss some errors.

Here’s a link to the W3C CSS validator:
https://jigsaw.w3.org/css-validator/

Your page looks good @germankousal. Some things to revisit;

  • Run your HTML code through the W3C validator.
    There is an HTML syntax/coding error you should be aware of and address. (This is HTML5 so you’ll want to correct that error)
    Since copy/paste from codepen you can ignore the first warning and first two errors.

Add the following property: value: pair to any of your selectors to help you visualize how you have element set up and styled
border: solid 1px red; (change the color to anything that makes it easy to see)

Yes, I recommend the W3C validator for checking HTML code over codepen’s validator.
Codepen’s CSS analyzer is pretty good but the one for HTML misses quite a bit.

1 Like

Thanks! I saw that error, but since I used YouTube’s pre-made iframe element for embedding the video I was confident it would be ok to just ignore it… my bad. I already used the CSS replacement suggested.

Thank you, very useful trick!

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