Responsive design with Mobile-first using Flexbox

Community feedback

• 

  Xavier•140

  @xavCSPosted over 2 years ago

  Hey, nice attempt at this challenge, a few things:

  box-sizing: content-box;
  

  This declaration in your CSS is not really needed since the browser uses this by default and actually I'd recommend you go with this declaration instead:

  html {
      box-sizing: border-box;
  }
  
  *, *::before, *::after{
      box-sizing: inherit;
  }
  

  https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block A couple of useful MDN docs on this topic

  Your button is fine it just wanted a darker colour in the hover state, but using a styled <a></a> tag is better as it will link to a different place on the site to buy this product.

  I believe your image issue is coming from setting explicit heights and widths as well as the fact that you're trying to style the image whilst using the background-image property. It would be easier and more readable if you just import your image on the site using the <img></img> tag and set a max-width: 100%; on it. This will make it responsively sized by default as it will take as much space as it can within the container.

  You can check my solution out for some more insight:

  Hope this helped.

  Marked as helpful

  0