different footer image on mobile device

Hey @susanmelchers

To use a different image in your footer on smaller screens, you can use a little bit of custom CSS code.

Go into your site’s admin Dashboard and select Appearance → Customize →?Additional CSS. In the CSS textbox on the left, add the following code:

@media screen and (max-width: 767px) {
  #page .site-footer {
    background-image: url('https://www.noobkoffie.com/wp-content/uploads/2020/11/pexels-vitaly-vlasov-1323730-scaled-e1604749612660.jpg');
  }
}

You should see the changes right away, but this is just a preview for you, so you can experiment a little with different images if you like (the one I used in my code above doesn’t actually make things more clear, but is only used as an example of course).

Or, you could remove the image altogether, by using this code:

@media screen and (max-width: 767px) {
  #page .site-footer {
    background-image: none;
  }
}

Once you’re happy with it, select “Save Changes” from the top, and your changes will be applied to your site.

unfortunatly it doenst work. i tried the code already a few days before.

we bought a powerpack – designer for storefront. i think this has something to do with it..

Hey @susanmelchers

I don’t see the code applied anywhere in your site. Where did you add it exactly? Can you make a screenshot of it and share it here?

For making screenshots, I generally recommend using https://snipboard.io — please follow the instructions on that page, then paste the URL here in your response.