Swapping mobile image with css / Trocando imagem responsiva com css

Tips and Tricks
1

@media (min-width: 992px) {
#hero {
background: url(“big.png”) center / auto no-repeat;
height: 680px;
padding-top: 180px;
}
}

@media (max-width: 720px) {
#hero {
background: url(“small.png”) center / auto no-repeat;
height: 300px;
padding-top: 500px;
}
}
este

2

You could simplify this by putting mobile first:

#hero {
  background: url(“small.png”) center / auto no-repeat;
  height: 300px;
  padding-top: 500px;
}

@media (min-width: 992px) {
  #hero {
    background: url(“big.png”) center / auto no-repeat;
    height: 680px;
    padding-top: 180px;
}
1 Like
3

Also keep in mind that from Bootstrap 4+ your styles should be ordered from smallest to largest. This post explains it better since I had to ask too. My confusion came from working with both BS 3 and 4 and now 5 and I kept going back and forth a lot for some clients and it just messed me up lol :slight_smile:

1 Like