Header image only working on desktop, nothing like preview for other screens

  • Hello please help!
    I’m trying to get any image I upload to my header to actually do what the theme says on mobile and tablet screens. Desktop is fine, but on other screens the image is static and randomly positioned.
    I would like for it to be able to scroll and placement make sense.
    I’ve scoured through other forums on how to adjust this through CSS but nothing is responding.
    Any advice is welcome!

    Thanks

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter upperhandmedown

    (@upperhandmedown)

    updating topic tags

    Theme Author alexvtn

    (@alexvtn)

    Hello @upperhandmedown

    i tested your website and the background image is resized automatically based of the device width

    Anyway you can disable this option going to appearance > customize > additional css

    @media screen and (max-width: 768px) and (min-width: 0px) {
    #logo-wrapper {
    -webkit-background-size: contain !important;
    -moz-background-size: contain !important;
    -o-background-size: contain !important;
    background-size: contain !important;
    background-repeat: no-repeat;
    }
    }

    Please let me know

    Alex

    Thread Starter upperhandmedown

    (@upperhandmedown)

    Hi Alex, thank you for the code.
    However, this only made the background image disappear – it is just white behind the text now on both mobile and tablet. Any suggestions?

    Thank you,

    Stephanie

    Theme Author alexvtn

    (@alexvtn)

    Hello @upperhandmedown

    you should use a different image for mobile devices, you can use the following code and replace the image URL with your mobile image

    @media screen and (max-width: 768px) and (min-width: 0px)
#logo-wrapper {
    -webkit-background-size: contain !important;
    -moz-background-size: contain !important;
    -o-background-size: contain !important;
    background-size: 100%!important;
    background-image: url(https://www.upperhandmedown.com/wp-content/uploads/2020/06/Dressform.jpg);
    background-repeat: space;
}

    Please let me know

    Alex

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Header image only working on desktop, nothing like preview for other screens’ is closed to new replies.