Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #35877
    Heather
    Guest

    Hello,
    I am trying to get my site to look the same on mobile as it does on desktop, as much as possible. Ive looked on the forums and tried some of the suggestions but for some reason its not working properly. I thought I had it with one of the CSS codes but then checked it later and it was back to looking as it had originally or not all pages show the same image style. I just want the background to resize and scroll as much as possible and be consistent on all pages. I used a CSS code to get the title to resize on mobile which worked well. Is there something else I’m missing? Also does the CSS code overwrite the settings on the background page so I don’t have to worry about those setting?

    #35896
    Jesse Owens
    Keymaster

    Hi Heather-

    Thanks for the great question, and thanks for using the Florentine WordPress theme.

    The background size issue is particularly prominent on iPhones, because of the way that iOS Safari handles the cover background size together with the fixed scroll property. iOS Safari treats the background size as the entire height of the webpage, not the height of the iPhone’s screen. We have a guide here with instructions on how to fix it.

    To summarize the tutorial, navigate to Customize > Advanced > Custom JS & CSS and add this snippet to your Custom Theme CSS:

    @media only screen 
    and (max-device-height : 1024px) 
    and (max-device-width : 1024px) {
        .palette-primary.custom-background,
        .boldgrid-section.background-fixed {
            background-attachment: scroll !important;
        }
    }
    #35901
    Heather
    Guest

    Hi Jesse! Thank you so much! That worked finally. The only issue is that the image scrolls on mobile but not on the desktop so theres a white space when scrolling on mobile. Is there anyway to fix that?

    #35918
    Heather
    Guest

    Hi Jesse! Thank you so much! That worked finally. The only thing left is the background image scrolls up on the mobile version and leaves a white spot. It’s fine on desktop

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Background image resizing on mobile’ is closed to new replies.