Skip to content
Submitted over 1 year ago

responsive landing page using flex box and grid layouts

lord IBE•70
@Emmaibe
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

making the background responsive was a little challenging.

please I'd like to know the best practices for switching between background images in a responsive design. is just using media query the best or is there some process better?

Community feedback

  • Ruchi•340
    @deoruchiPosted over 1 year ago

    For changing the background images you can use <picture> tag.where you can handle many images of different screen size, resolution, and pixel density.

    Media queries works well and good as it allows you optimize the images in your own way depending on the device ,it could be more flexible than picture tag in some cases.

    I hope you find this helpful.🙂

    Marked as helpful
    0

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