Used CSS and media query

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Kenbak, congrats completing your first challenge, and welcome to Frontend Mentor!

  It's good that you're asking about responsiveness for this challenge because this one doesn't particularly have a mobile view where the layout changes, but it's still good to think about what to do when the browser width changes. About your question, what I would do is to use responsive width properties such as min-width and max-width, and I would try not to use fixed widths/heights. You have a width:300px and also a width:80% for mobile view, and the 300px fixed width is what limits the responsiveness especially. You can try giving the component a max width and then see what happens in a smaller view. For this to work, I'd make these changes:

  1. On container, add max-width: 300px (or you can even try 350px) and delete the width for both desktop and mobile views. Using a value like 400px or 350px could allow you to see the responsiveness in action, and then you can change it to 300px if you want. I would also remove the margins you have now and change that to margin: 1rem to make sure the sides don't touch the browser at smaller views when it's still responsive.

  2. For the img, I would change the width to 100% instead of the fixed width you have now.

  3. Lastly, I'd center the component using with these properties on the body selector:

     body {
         min-height: 100vh;
         display: grid;
         place-content: center;
     }
     

  Once again, great work on this first challenge, and do keep going! 😊

  Marked as helpful

  1

  ---

  

  Kenbak•40

  @KenbakPosted over 2 years ago

  @elaineleung Thank you very much for your quick feedback! I will try this asap and see how it goes!

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Kenbak, congratulations for your first solution!

  Answering your question:

  There are 3 kind of width that you'll be working often, width, max-width and min-width. Note that the difference between these three properties is that width is fixed, example, width: 320px is an container that doesn't get bigger or smaller than 320px but max-width: 320px have the maximum of 320px and can contract when the screen scales down and adjust its size. The min-width is the opposite of max-width, so the container has a minimum size and can grow.

  In this challenge the container should have max-width: 320px to allow the card to grow 320px and scale down with the image when the window get smaller. This property will make the card both mobile and desktop screens. Remember to use min-width or max-width for responsive solutions and never with if you expect some change in its size.

  If you’re not familiar to media queries and responsivity, here’s a good resource to learn it:https://www.w3schools.com/css/css_rwd_mediaqueries.asp

  Hope this helps, happy coding 👋

  Marked as helpful

  0

  ---

  

  Kenbak•40

  @KenbakPosted over 2 years ago

  @correlucas Thank you very much. Responsivity is tough for me, but your answer helped me!

  1