Iphone Row Background
C@G Oncypruscom Ltd
Dear Team Hi,
I need your support at iPhone 12. On Home Page website https://www.joannaxanthouli.com/ On Mozzila Responsive Mode iphone 12 shows background image correct. https://ibb.co/hRbVL59
On actual iphone 12 shows background wrong. https://ibb.co/zVBsGyq Client went first time to his website (we just took website online today) thru iphone and picture does not shows correct. Its not a Cache.
On Android shows correct https://ibb.co/hRbVL59
Could you please check row settings and inform me where is mistake. https://ibb.co/TmZYwkG
Or please advise what to change.
Regards, Michelle
Paul Frankowski
Accepted AnswerCSS is correct - method used many times, but where you used it? Anyway....
Option #2
1st Row (Save and reuse it) - and inside change background settings for used bg image:
- Bg Size: cover > contain
- Attachment: Fixed > Scroll
Then set that "new" row to be displayed ONLY in Mobile (Hide on Desktop, Tablet), and Orginal Row must be hidden in Mobile(!). So simple. All steps from settings, no need to use CSS.
Paul Frankowski
Accepted AnswerHi Michelle,
it's Mobile Safari "bug" (or feature as they say) that wasn't fixed for many years. Very popular topic in web. So it's not our fault this time. I can say "sorry" only for delay with response.
Safari browser don't understand that CSS style if they are together
background-attachment: fixed;
background-size: cover;BTW
Paul Frankowski
Accepted AnswerCustom CSS fix for you that should help:
@media screen and (max-width: 740px) {
.sp-page-builder .page-content #section-id-1687154624249 {
background-size: contain !important; background-attachment: scroll !important;}
}copy whole part and paste inside that Page custom CSS area!
C@G Oncypruscom Ltd
Accepted AnswerDear Paul Hi,
Thank you for your replay. Unfortunately this is not working. @media screen and (max-width: 740px) { .sp-page-builder .page-content #section-id-1687154624249 { background-size: contain !important; background-attachment: scroll !important;} }
Do you have any other solution?
Regards, Michelle
Pavel
Accepted AnswerCSS is correct - method used many times
Hi Paul. The only thing I would suggest changing in your code from 740px to 992px.
But in general, setting up a background image for different devices is what has long been required in SPPB.