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

An advice generator using advice slip API

@Oluwafemi21

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What's the best way of dealing with two different images? One for the desktop view and one for the mobile view. Do I use them as background-images and use media queries to change them depending on the viewport width?

Community feedback

IRVINE MESA 1,855

@DrMESAZIM

Posted

I read through your question for the community in particular I will help your on this topic mobile responsiveness

Take note by default all styling you do is for mobile view unless your specify preferable using media queries

For example if you are provided that

"image-header-desktop.jpg" is reserved for large screen

"image-header-mobile.jpg" is reserved for small screen

therefore if you apply you code like this meaning large screen start from 600px it would be correct

<head> .image-overlay{ background :url(image-header-mobile.jpg)

@media only screen and (min-width: 600px){

.image-overlay{ background :url(image-header-desktop.jpg)

}

</head> <body> <div class="image-overlay"></div> </body>
0

@Oluwafemi21

Posted

@DrMESAZIM Oh thank you. I just wanted to know if media queries was a better option

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