pictures on iPhone - Forum | JoomShaper
Solved SP Page Builder

pictures on iPhone

Asked by enrico 5 years ago Last activity 5 years ago

When I use the pagebuilder to create image content all works fine so far. I find most of the stuff I´ll need to change. But there is one thing what I´m not able to change:
When using a iPhone in Portrait mode the pictures are to big and outside the template. Would be great if someone could help me solving this.

Problem only exists on iPhone 12 - not on iPhone 6s... I have no idea about the necessary resolution settings and media queries I have to do.

using
SP Page Builder Pro
Version: 3.7.12

Accepted answer

Marked as the solution
Ofi Khan Staff

Hello enrico

You need to use Custom CSS according to the iPhone 12 viewport. Sorry, we do not provide customization support. But I will give you hints. Please use this CSS to Template Options -> Custom Code -> Custom CSS. The below CSS will give you full image on the background but it will look stretched.

/* Portrait */
@media only screen 
  and (min-width: 390px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
        div#section-id-1626011300583 {
            background-size: 100% 100% !important;
            background-position: 0 0 !important;
    }
}

Best regards

2 more replies

enrico Asked this
5 years ago · edited

thank you very much! ;) this helped me a bit, but who could help me fixing the issue with one sample? Tried to fix it last 2 days but was unable to find the right syntax and what tho change, so I see some changes.
To all I´ve done I had no visible result.....

kind regards

it also would help me much more. if someone could tell me, how to emulate a iPhone 12. All the occuring problems can´t be seen on Mozilla... it displays all correctly, but on the phone itself all is in wrong positions. Using the iphone 6 to 8 as reference shows all correctly too....

Ofi Khan Staff

Please take some expert help this issue. Sorry that I could not help you much.

Log in to reply.