Hi

We have these options on page builder

https://prnt.sc/1h0msd0

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

Hello there,

Thanks for contacting with us. Can you explain your query, please.

-Regards

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?

Hi,

You can follow this

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

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?

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

yes i need help ;-)

I share my url in the hidden content

Hi

Give me the specific page link please and also share the screenshot

https://tierische-urlaubstraeume.de/unterkunft/urlaub-mit-hund-landal-dwergter-sand-oldenburger-muensterland?arrivalDate=&departureDate=

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

Do you want the texts on center?

I would like the Landal banner to adjust automatically on tablet and mobile view.

Could you please check now?

http://i.prntscr.com/4nao4OR_S9mbrYcT3RHbiw.png

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.

If possible give me a screencast of your issue.

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

https://blisk.io/devices/details/iphone-12

https://stackoverflow.com/questions/58087446/all-media-queries-for-iphone-12-pro-max-mini-and-older-iphones

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

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 ?

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.