Is there a way to create a fallback in my CSS for changing the background image to a color when viewed on a mobile browser once the pixels reach the max-width?
In the snippet below, the media query "only screen and (max-width: 600px)" works if the top body class is not used. Is there a better way to approach this?
body {
margin: 0;
background-image: url(https://api.timeforkids.com/wp-content/uploads/2019/09/final-cover-forest.jpg);
background-size: auto;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
input{
background-color: #03fcd3;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}