Single price grid component using grid with the help from griddy.io

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @Zer0fr0st93 👋🏻

  I have some suggestion to help you fix the accessibility issues and some other things.

  • In your markup, <div class="content">...</div> should be <main class="content">...</main>. This will fix the accessibility issues, just, don't forget to generate a new repot once you fix the issues.
  • Also, I suggest adding transition: all 0.2s; to the button, this will make :hover state smoother. You'll see what I mean when you add it.
  • Last but not least, let's position the box tin the center, so here's how to do it:

  body {
      background-color: var(--light-gray);
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
  }
  

  The four lines that I added in body, will make sure that the content stays centered no matter what viewport width. Now the content will be centered not only on mobile, but also tablet and desktop viewport widths.

  I hope this was helpful 👨🏻‍💻 overall, you did a great job, very well done. Cheers 👾

  Marked as helpful

  1

  ---

  

  P

  Bill Georgopoulos•200

  @billgeorgop93Posted about 3 years ago

  @kens-visuals Thanks I really appreciate your detailed response but I have one question about the main <main class="content">. Do I make changes in the CSS as well something ?

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @Zer0fr0st93 you're welcome 😇 No, as long as you don't change the class name, CSS doesn't care what tags you use int HTML.

  0

  

  P

  Bill Georgopoulos•200

  @billgeorgop93Posted about 3 years ago

  @kens-visuals Well I made the changes and something is somehow broken. Where should I send you what I mean ?

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @Zer0fr0st93 did you push it to GitHub? if not you can paste it here.

  0

  

  P

  Bill Georgopoulos•200

  @billgeorgop93Posted about 3 years ago

  @kens-visuals do you see now ?

  0

  

  P

  Bill Georgopoulos•200

  @billgeorgop93Posted about 3 years ago

  @kens-visuals ok nvm I found what is wrong :P

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @Zer0fr0st93 I do, but it looks ok, what was the problem?

  P. S. and what was it?

  0

  

  P

  Bill Georgopoulos•200

  @billgeorgop93Posted about 3 years ago

  @kens-visuals So the problem was here : @media (min-width: 750px) {

  body {instead of the body it was main}{ height: 100vh; display: flex; align-items: center; justify-content: center; }

  .content { grid: "first first" 1fr "second third" 1fr / 1fr 1fr; max-width: 600px; }

  .card { padding: 1rem 3rem 2rem; }

  .second { border-radius: 0 0 0 5px; }

  .third { border-radius: 0 0 5px 0; } }

  1
• 

  Fidel Lim•2,775

  @fidellimPosted about 3 years ago

  Hi @Zer0fr0st93,

  Great job finishing the project! It looks great on desktop and mobile devices. Well done :)

  1

  ---

  

  P

  Bill Georgopoulos•200

  @billgeorgop93Posted about 3 years ago

  @fidellim Thanks for your feedback :)

  0