- Posts
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?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
coverbackground size together with thefixedscroll 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; } }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?
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
- The topic ‘Background image resizing on mobile’ is closed to new replies.
