Submitted almost 2 years ago

Responsive Room-Homepage using [NextJS, Image Slider]

next, cube-css

Kenny Ng•400

@kennylun123

A solution to the Room homepage challenge

Preview Code

Solution retrospective

Hi everyone, this is my solution of Responsive Room-Homepage using [NextJS, CSS Grid, Flexbox]. For me, the most difficult parts are <img srcset="" sizes=""> and the sizing of image slider. I'm happy to complete this challenge.

Any comment would be appreciated. Thank you! :D

Code

Please log in to post a comment

Community feedback

Raymond•370
@Ihezie
Posted almost 2 years ago
Hey! Great solution👍. I also tried using <img srcset="" sizes=""> in my solution to this challenge; however, that didn't work out for me. So I used this instead:
```
<picture >
                <source
                  media="(max-width: 450px)"
                  srcset={item.images.mobile}
                />
                <img
                  src={item.images.desktop}
                  alt="hero"
                />
 </picture>
```
This method allowed me to use different hero images for varying screen sizes. Hope this helped.😊

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