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 base apparel page

@katrine9176

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


Another unfinished (now finished) solution. Any feedback is welcome!

Community feedback

Aimal Khan 2,260

@Aimal-125

Posted

In your HTML code:-

<header>
<img src="images/hero-mobile.jpg" alt="" class="woman">
<img src="images/hero-desktop.jpg" alt="" class="woman-big">

Place these two <img> elements inside separate <div> elements. For the desktop version set the height and width of this <div> element and give <img> element width: 100%; height: 100%; On my laptop your image's top part is out of screen because of margin-top: -123px; So, by placing <img> elements inside <div> elements make them intact inside their containers and it will not move.

Marked as helpful

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