CODEWITHSUNDEEP
phpjqueryhtmlcss
Justin Luce
Justin Luce

Reputation: 25

How do I have a different background color on the mobile view versus the desktop view?

Is there a way to have a different background color for my website when viewed on a mobile device versus when viewed on a desktop? I know you can change it depending on the screen width, but I need it to be different for someone viewing it on an iPad as well, which is similar to the width of a desktop monitor, so that doesn't work.

Upvotes: 2

Views: 5764

Answers (1)

Jakub Muda
Jakub Muda

Reputation: 6714

Yes and it's very simple! The easiest solution is to apply CSS @media queries and you can specify exactly at which screen resolution the background color should change (or based on other features not only screen resolution!).

CSS @media has many features that you can set and you can read more at W3Schools LINK

@media (max-width:768px){
    body{background:red}
}

@media (min-width:769px){
    body{background:blue}
}

Upvotes: 2

Related Questions