@elaineleung
Posted
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:
-
On
container
, addmax-width: 300px
(or you can even try 350px) and delete thewidth
for both desktop and mobile views. Using a value like400px
or350px
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 tomargin: 1rem
to make sure the sides don't touch the browser at smaller views when it's still responsive. -
For the
img
, I would change the width to 100% instead of the fixed width you have now. -
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
@Kenbak
Posted
@elaineleung Thank you very much for your quick feedback! I will try this asap and see how it goes!