Hi,
is there a possibility to automatically make the created page in the page builder mobile compatible (for mobiles, I Pad) via a CSS?
Staff replied
SP Page Builder
Mobile friendly for Tablet & Iphone -css
18 replies
Mehtaz Afsana Borsha Staff
Hi
We have these options on page builder
It is not possible to automatically make the created page in the page builder mobile compatible (for mobiles, I Pad) via a CSS. But if you want then you can customize it via css
Thank you
Anne Staff
Hello there,
Thanks for contacting with us. Can you explain your query, please.
-Regards
Tommy Kaupert Asked this
I would like to enter via a css that they created page is automatically adapted to each device. In Page Builder, I have the option to input via custom CSS. Is there a css that meets this requirement?
Mehtaz Afsana Borsha Staff
Tommy Kaupert Asked this
Hi,
thanks for the links. but I have one more question:
if you can see I added the addon html and insert here, that the banner will be shown on your site.
Desktop everything is ok. If i switch to mobile the banner is to long...
https://i.imgur.com/0FbMWhK.png
what do I have to set so that the banner is also fully visible in the mobile view?
Mehtaz Afsana Borsha Staff
Hi
You have to add some custom css for this. If you need help then you can share your site URL on the Hidden content so that I can check
Thank you
Tommy Kaupert Asked this
yes i need help ;-)
I share my url in the hidden content
Mehtaz Afsana Borsha Staff
Hi
Give me the specific page link please and also share the screenshot
Tommy Kaupert Asked this
screenshot (for mobile view): https://i.imgur.com/3CInGX2.png
you can see, that the affiliate link (from Landal) is too long for mobile view
Mehtaz Afsana Borsha Staff
Do you want the texts on center?
Tommy Kaupert Asked this
I would like the Landal banner to adjust automatically on tablet and mobile view.
Mehtaz Afsana Borsha Staff
Could you please check now?
Tommy Kaupert Asked this
Hi,
nothing changed.
The banner is still bigger than the ad e.g. Iphone 12.
It is not automatically adjusted to the width of the cell phone.
Mehtaz Afsana Borsha Staff
If possible give me a screencast of your issue.
Paul Frankowski Senior Staff
Tommy as you may know, there is huge number of phones on the market - and their resolution are also different.
SP Page Builder use basic rules from Bootstrap, to manage all resolution there would have to be around 8-10 responsive switchers (options) not 4 as we now now.
There is iPhone 12 Mini, iPhone 12 Pro, 12 Pro Max .... madness for web developers.
Iphone 12 has huge resolution - it means that simple CSS rules may not work perfect.
That's why global developers prepared extra CSS styles (@media) for such a cases
Paul Frankowski Senior Staff
5 years ago
· edited
If we talk about your banner - the problem is not inside SP Page Builder (not gulity this time!) - but how iframe code is displayed.
As I checked you set static width: 728 for banner iframe -- this is not fully recommended solution in year 2021. Don't get me wrong, but browser still listen webmaster settings and they are trying to display 728px width also on mobile / tablet view.
Please start from this lecture: https://www.w3schools.com/howto/howto_css_responsive_iframes.asp
(I guess, you can find similar one in german language as well)
Instead of width="728" inside your iframe - use other simple solution - style="width:100%"
LOOK
Tommy Kaupert Asked this
thanks for your answer. This is the link i got from awin.
Now I need a way to adapt this predefined link from Awin to mobile devices using CSS.
you write global developers prepared extra CSS styles (@media) for such a cases.
so i have to input all the css ?
Paul Frankowski Senior Staff
Read 2nd post if we talk about banner only - just make small modyfication in iframe code.
OR
contact with banner developer - (s)he should give you also responsive variant.
Log in to reply.