Support » Theme: Storefront » different footer image on mobile device

  • Resolved susanmelchers

    (@susanmelchers)


    I love the look of the image on a desktop site but it doens’t work on mobile devices. The text isnt readable anymore. I would love to add a differt image, if that is not possible, just hide the image or change the offset.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • 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.

    Thread Starter susanmelchers

    (@susanmelchers)

    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.