Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Single Price Grid landing page (newbie)

Lawrence 240

@LawrencePryer

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


My second project on Frontend Mentor. Overall I am quite happy with how it went but I could not work out why in Chrome's developer tools I could not get a margin to appear at the bottom when viewing on a Moto G4 or Galaxy S5. Any feedback about this would be very much appreciated!

Thank you again in advance for your comments.

Community feedback

Szymon Rojek 4,540

@SzymonRojek

Posted

Hi Lawrence,

Well done! I like your RWD and generally final solution! cool!

I have checked your HTML structure and a few points for you:

  1. I'd like to recommend reading more about semantic tags and some of them you can try to implement here. Divs are semantically inert elements — elements that don’t really do or say anything, of course, they are important too. You can change a bit the HTML structure by using semantic tags;
  2. This is only a small component but you can also use the tag h1. Just to let you know, you should only use one h1 per page. Using more than one will not result in an error, but using only one is seen as a best practice. It makes logical sense => h1 is the most important heading, and tells you what the purpose of the overall page is (generally please read about headings h1-h6);
  3. BEM: I am thinking about your BEM naming here (I will get back to you), in the meantime, please have a read these articles
  1. There is good practice do not write styles on tags (check your CSS file => headings).

That's it from me. Please read these articles and let me know what do you think about the BEM.

Ps. Don't forget to upvote any comments on here that you find helpful.

Greetings :D

2

Lawrence 240

@LawrencePryer

Posted

@SzymonRojek

Thank you again for the very helpful comments. I will have a look into BEM a bit more and it was very useful to be reminded about semantic tags.

Lawrence

1
Szymon Rojek 4,540

@SzymonRojek

Posted

@LawrencePryer

Thank you so much. I am glad. I have commented your last project again, check it out, hope you like it.

0

@zidoxx

Posted

Hi Lawrence excellent work, to add the margin at the botton you have to desactivate the heigth in the container class just for the mobile, it necessary add a media query to control this, i hope this help you.

0

Lawrence 240

@LawrencePryer

Posted

Hi Zidoxx. Thank you for the feedback and advice. I will give this a try to see if I can fix it.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord