Responsive Layout with email input validation
Design comparison
Solution retrospective
I was not able to figure out a way to make the image full width in the mobile layout without negative margins and calc compensation... I used that originally, but it cost be later as I ran into an issue where the negative margin was causing some unknown overflow and messing with the size of the body. If anyone can help, I would like to know how I could have done that better.
Community feedback
- @Kareemah-codesPosted almost 3 years ago
Hello there, you could try removing padding on the "left" class. Then you could try adding that padding (the 2.5rem) to each of the items in your inner-container elements individually except the image. The problem is that the padding for the "left" class is affecting everything inside it so it invariably affects the "inner -container", therefore affecting the picture. Let me know if this was helpful. Also, could you follow me so that you can also correct me on whatever solution I post? I am a newbie :).
Marked as helpful1@UDsGitHubPosted almost 3 years ago@Kareemah-codes This was very helpful. I ended up trying again and reworked it like you said so that the image now has full width on mobile displays. Thanks for the suggestion. I have also followed you, so we noobs can help each other out.
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