Design comparison
Solution retrospective
Howdy there, I just started learning HTML & CSS few days ago, and this is my first project I attempted. While attempting the challenge, I found the web-responsiveness part really hard. My page (specifically the image in a mobile-view) doesn't correctly adjust according to the screen size. Any suggestions on how to fix that part?
Community feedback
- @ericsalviPosted over 3 years ago
Hey, welcome to Frontend Mentor, and congrats on submitting your first solution. Mobile responsive design can be hard if you are new to it. If I could suggest taking a look at your code through Chrome's Inspector and look at the breakpoints between 751-1210ish. Your content is breaking. What you could try doing is playing around with possibly redesigning the image to not be an image but rather setting it as a background image. This way you can fill the entire container where the image is using CSS background sizes such as
cover. The container could be a percentage so it flows with the different screensizes.What I see happening now is that the image is too wide and causing the rest of the content to break.
Don't be afraid to delete things in the inspector to see where the culprit is.
Also, keep up with the momentum.
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord