CSS Variables, CSS Grid, Flexbox, and url().

Community feedback

• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Hello Craig,

  Your submission looks great! I have few more suggestions:

  -to improve accessibility: line through styling alone is not enough, so you'd need to wrap the old price in an s or del element and can add visually-hidden text to make it clear that’s the old price.

  • You can make the font weight of the new price a bit bolder to match the design. Also very tiny detail, but you can remove the border from the pricing_btn, like border:none instead of border: 1px solid var(--green); for a more consistent look.

  Hope you find this feedback helpful!

  Marked as helpful

  1

  ---

  

  Craig Johnson•240

  @craigdev937Posted over 1 year ago

  @visualdenniss - I'll look into that. Thanks for the tip! 😉

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

  There is no need overflow-y in the body. To center the main on the page using flexbox or grid instead of margin, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  USING FLEXBOX:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  USING GRID:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Craig Johnson•240

  @craigdev937Posted over 1 year ago

  @Hassiai - I never knew about <place-items>. Thanks for the info. 🙂

  0
• 

  Francisco Carrillo•5,540

  @frank-itachiPosted over 1 year ago

  Hello there 👋. You did a good job!

  • You could also use the <picture> tag that allows you to interchange the images depending of the viewport size. Red more about this awesome tag here

  I hope you find it useful! 😁😁 Above all, the solution you submitted is great👌!

  Happy <coding /> 😎!

  Marked as helpful

  1

  ---

  

  Craig Johnson•240

  @craigdev937Posted over 1 year ago

  @frank-itachi - Thanks for the tip! 😉

  0