used the display of grid to place the items/content at the center

Community feedback

• 

  eren•300

  @erensaracPosted 7 months ago

  Congratulations! @Zwelihlecomet2

  I reviewed your solution. I wanna help you with some feedback. In your solution, It looks like you used percentage units for width and height propertys. It's not something expected for responsive design usually. You should use relative lengths like a rem or em.

  For example. If you know your card length after the 768px (mobile). You can handle the challenge using the examples below.

  Example 1: You can use calc function for relative width. It will be 100% width but 2rem minus. If your root have 16px so it will be width: 375px - 32px and its mean your width will be 343px on 375px screen sizes. Your container already have grid and place-items: center. So It will be centered.

  /* It's for mobile */
  .container-content {  
    width: calc(100% - 2rem);
    /* 2rem for giving space left and right. */
  }
  
  /* It's for desktop */
  @media screen and (min-width: 768px) {
    .container-content {
      width: 24rem;
    }
  }
  

  Example 2: But if you don't wanna full width on mobile (768px and below). You can use specific width, because we know the width on mobile. It should be near the 20rem. You should use margin-right and margin-left at this method to give space around the edges.

  /* It's for mobile */
  .container-content {  
     width: 20rem;
  }
  
  /* It's for desktop */
  @media screen and (min-width: 768px) {
    .container-content {
      width: 24rem;
    }
  }
  

  Also you can use Flexbox at your container-content and texts classes to control your layout simply.

  I recommend these resources for you.

  • Responsive Design
  • A practical guide to responsive web design
  • Flexbox
  • CSS Values and Units

  You can browse my solution here;

  • Blog Preview Card

  If you have specific questions, don't worry asking. Happy coding!

  0
• Account deleted

  Good start on the challenge, Zwelihlecomet2.

  I have some things to address that could help you with your coding:

  • In your HTML, you can add classes directly to the img or svg tag without having to wrap them in a div.
  • In your CSS, consider adding padding to your text to add space around them.
  • When setting the width of an element, use pixels to keep the width still rather than stretching it.
  • Be careful when adding a fixed height to your card, as it can overflow the content inside.
  • You can center your content by using either the body selector or using the position property inside your card. Both methods work equally well.

  body {
  height: 100vh; /* or 100% */
  display: flex;
  justify-content: center;
  align-items: center;
  }
  
  /* _ _ _ OR _ _ _ */
  
  .container-content {
  position: absolute; /* or relative */
  top: 50%;
  bottom: 50%;
  transform: translate(-50%, -50%);
  /* your styles */
  }
  

  As for your media queries, they appear well. With that, I wish you luck on your next challenge.

  0
• 

  Dilip Kumar•350

  @curiousdilipPosted 7 months ago

  Congrats on your 3rd Challenge!

  However there are some improve needed in your code as i can see from the screenshot, you can reduce padding bottom

  Regards Dilip

  0