Content Area Modal mobile scaling

[Marcus_Madmix]

Hello!

I have a small problem with the Content Area Modal element. Text inside the area doesn’t scale for some reason. The background area scales like it should, but the text remains the same size. On mobile devices the content doesn’t fit the screen. Is there a way to fix this?

You can see the problem on this page:
http://31.217.192.35/~kouvola9/renkaat/

Thank you for your help!

[rad]

Hi Marcus,

Thanks for reaching out.

The problem is the static width that you have applied to the content.

<div style="padding: 1em;line-height: 1.4;width: 500px;text-align: left;">

...
..
.

</div>

Please remove the 500px on the content, then the text should break into multiple lines on the browser.

Responsive content is when it follows the content of the device, applying a static or fixed dimension kills the purpose of responsiveness.

But if you prefer following the 500px width, at least you could change it into max-width: 500px; instead of width: 500px;

Thanks!

[Marcus_Madmix]

Hi @Rad!

Thank you very much for your help! This was a dumb mistake on my part. Could you please assist me with one more problem?

How do I get the content area to scale properly on mobile devices. Now the content box is too narrow on mobile.

Thanks!

[lely]

Hi Marcus,

It is narrow because you have set a maximum width of 40%. Please try to use px on maximum width. Let’s say 500px or a little higher. This way, it will not affect mobile.

Hope this helps.

[Marcus_Madmix]

Hi @Lely!

Thank you! One more question regarding the position of the modal. How can I center it on mobile screens? At the moment it is positioned slightly to the right.

Thanks!

[lely]

Hi Marcus,

The first 2 modal position is correct. Then the succeeding, I can see is slightly to the right. Inspect the first modal which is correct, save it as preset. Then inspect other modals with issue on position. Click apply preset. From preset dropdown choose the one you just save.

Hope this helps.