Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

CSS changes not working on iPhones, but working on Android


Question

Site URL: https://thunderfoxmusic.com

Hi, I'm pretty new to Custom CSS and have been using it based off the advice found on forums.

I'm trying to display a different fixed position background image for desktop and mobile for viewing optimisation. I've managed to get it working on desktop, and I got it working on mobile by placing a mobile-friendly background image behind the original background image, then coding for the foreground image to be transparent when viewed on mobile.

It works fine in the mobile preview in the site builder, and it also works fine viewed on android phones. It doesn't, however, appear to work on iPhones which just display the desktop optimized image but zoomed in significantly.

I've attached a screenshot of the view from an android (the one which fits the screen) and the view from an iPhone - below is the code that I'm using to achieve this (NOTE: I changed the 'max-width' paramater from 767 px to 950 px as I thought this might solve the issue but it hasn't. It also hasn't messed up the android view)

[data-section-id="5e4e0b259625b1547470a01f"] .section-background {
    background-image: url("https://images.squarespace-cdn.com/content/v1/5e4ce6ee2218e34cd31829d3/86c35289-8a3c-49d4-9d77-82583188abdf/ke17ZwdGBToddI8pDm48kHsP6h8ITLpzppVA9b8GOgt7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UQnys2-58Jn-eukW1UFae4kMRF6JsQQSjrbz6STkd2Ul9Aa7pjcgczeZz4RiAJynZQ/standing+seamless.jpg");
    background-size: cover;
    background-attachment: fixed;
}
@media only screen and (max-width:950px) {
[data-section-id="5e4e0b259625b1547470a01f"] .section-background img {
    visibility: hidden;
}
[data-section-id="5e4e0b259625b1547470a01f"] .section-background {
    background-image: url(https://static1.squarespace.com/static/5e4ce6ee2218e34cd31829d3/t/60ca068e80d4337c06eb2e36/1623852694300/standing+seamless+3to5+vertical+smaller.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
}

Thank you!!

200144182_721734898541689_1720753643331016655_n.jpg

199895423_921270565098457_5856748550377974693_n.jpg

Link to comment
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

2 answers to this question

Recommended Posts

  • 0

Hi. Have you solved it yet?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...