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.
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.
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.
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.