Only HTML and CSS were used

Community feedback

• 

  Johan•100

  @JohanChereauPosted over 1 year ago

  Hello @GintareSlusnyte 👋

  Well done for the challenge!

  As you said, the card design is the same whatever the screen size. Just in case, I'd like to precise that the widths given in the design file are the widths of the screens with which the designs were made, not the widths of the card.

  For this reason, I don't think it's necessary to use media queries here. You can simply code the style of your card once, and add a max-width to lock its width for all larger screen sizes. This will allow you to:

  • Avoid repeating your code twice in two different media queries.
  • Make sure your card doesn't break when the screen size is less than 375px.

  So you've got your section:

  section {
  background-color:hsl(0, 0%, 100%);
  border-radius: 15px;
  box-shadow: 0 0 1px 0;
  
  /*Style that was in the media queries copied here:*/
  margin: 150px auto;
  
  /*width: 300px; replaced by max-width to lock card width at 300px maximum.*/
  max-width: 300px;
  height: 450px;
  } 
  

  and your image :

  section > img {
  border-radius: 12px;
  height: 250px;
  margin: 20px 25px;
  }
  

  As for the image, personally I'd avoid giving it a fixed height in pixels. Instead, I'd opt for a width: 100%; this way, the image will always take up 100% of the width of its parent (which is the card) and its size will automatically adapt.

  • To center your card horizontally and vertically on your screen, don't hesitate to have a look at Flexbox or CSS Grid, they might come in handy 😉

  Don't hesitate if you have any questions. Happy coding!

  0