Solved Templates

Iphone Row background

Asked by C@G Oncypruscom Ltd 3 years ago Last activity 3 years ago

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

Accepted answer

Marked as the solution

Paul Frankowski Senior Staff

3 years ago · edited

CSS 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.

7 more replies

C@G Oncypruscom Ltd Asked this

3 years ago

Hi team,

Any answers?

C@G Oncypruscom Ltd Asked this

3 years ago

It is only views but no answers?

Paul Frankowski Senior Staff

3 years ago · edited

Hi 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 Senior Staff

3 years ago · edited

Custom 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 Asked this

3 years ago

Dear 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

3 years ago · edited

CSS 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.

Paul Frankowski Senior Staff

3 years ago

It depends what mobile phone you have and what direction (H or V).

But indeed 992px include wider range of devices.

Thanks Pavel, as always!

C@G Oncypruscom Ltd Asked this

3 years ago

Dear Paul Hi,

Appologizing for delay answer. CUSTOM CSS - does not works.
But second Options (create only for mobile view) - is working.
Thank you,
Michelle