Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Layout with email input validation

@UDsGitHub

Desktop design screenshot for the Base Apparel coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

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-codes

Posted

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 helpful

1

@UDsGitHub

Posted

@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

@Kareemah-codes

Posted

Great!, I am really glad it helped.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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