single price grid component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Abdulazeez, congratulations to have finished the challenge!

  I saw that your solution didn't turn to 1 column when it stretch until under 500px of width. You turn all the container in a single column using the property grid-template-columns, grid-template-columns: 1fr.

  By the way, your solution seems pretty good, I think you can change only the container shadow to the proper shadow, box-shadow: 0rem 0.9375rem 1.875rem rgba(0, 81, 171, 0.148847); and also the body background color to background-color: hsla(204, 43%, 93%, 1); to get closer to the challenge design.

  Congratulations!

  0

  ---

  

  Abdulazeez Olayinka Barakat•160

  @MUBARAHKAHPosted over 2 years ago

  @correlucas appreciate you! can you please help on how to make it responsive!

  0

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @MUBARAHKAH Hello, I took a look in your code.

  My advice is: delete the footer with the attribution, this way you focus on aligning the component. Delete the footer and the img tag from the html.

  This elements you can delete, and when your design will be working, you add it back:

  ` <footer> <p class="Attribute"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"> Frontend Mentor</a>. Coded by <a href="https://www.frontendmentor.io/profile/MUBARAHKAH" target="_blank"> Abdulazeez Olayinka Barakat</a>.

        </p>
  
      </footer>
  
    <img src="screenshot/single-price-grid-component-desktop.png" alt="new">`
  

  • Add the property flex to the body to align centered the component: body { display: flex; align-items: center; justify-content: center; }

  also to the .main-container the property flex to align: .main-container { display: flex; flex-direction: column; }

  The best way to do it, in my onion, is setting the container that will hold the 3 sections as a grid, a make the first section span 2 spaces. Then when the width goes under 500px your can set to the first section span only 1 space, becoming a 3 row grid.

  I'll left your the link of my solution and you can check the structure that I've used, you can try that.

  https://www.frontendmentor.io/challenges/single-price-grid-component-5ce41129d0ff452fec5abbbc/hub/single-grid-component-vanilla-css-easter-egg-obsZK5BL2p

  Marked as helpful

  0

  

  Abdulazeez Olayinka Barakat•160

  @MUBARAHKAHPosted over 2 years ago

  Thank you so much @correlucas

  1

  

  Abdulazeez Olayinka Barakat•160

  @MUBARAHKAHPosted over 2 years ago

  Thank you so much @correlucas

  0