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 component

Lavcia 30

@Lavcia

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 first solution! I hope one of you could screen it and give me some tips, I know I'm working very chaotic, but I'm to section my code a bit :) I would be grateful if someone could explain me (in a super simple language :)) how I can get rid of the frame on the bottom around the footer and apply it only to the colored section, I couldn't figure it out.

Community feedback

@askora16

Posted

Hello Lavcia! If I am understanding correctly, in order to get the footer out of the frame you need to take it out of the main div with "class = "grid", and place it below that div.

Also the frame still stays there, to remove this it looks like you need to adjust the grid-template. When i inspect your solution and turn off "grid-template: 1fr 1fr 0.1fr / 1fr 1fr;" in the ".grid" class the frame disappears. You just may need to adjust the height of the bottom 2 sections. Hope this helps and let me know if you have any other questions!

1

Lavcia 30

@Lavcia

Posted

@askora16 That's what I did in the beginning, but then in mobile view the footer ended up between two colored sections, so I chose the lesser evil and incorporated it in the grid. I should have mentioned that in my question 😬 Thanks for checking it out for me! 💛

0

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