Elements overflow

[mikerayjones]

Some elements (headings and buttons) on a page I’m developing overflow from their containers when browser width is reduced - see these two samples:

Clearly, I am a newbie… is there any simple way I can prevent this happening so they are more responsive?

Thanks.

[lely]

Hi @mikerayjones,

On your text/headline setup, please try to set max-width settings to 100%.

For more guidance please check our documentation here.
You may also watch and subscribe to our youtube videos here.

Hope this helps.

[mikerayjones]

Thanks, but I already had that set.

Do you have any other suggestions?

[christian]

Hey @mikerayjones,

In this case, please give us the URL of the page so we could inspect what’s forcing the width of those elements.

For the button check the paddings and button text margins. Set them to 0 to test.

For the Text, check out the Responsive Text methods shown in the following videos.

Hope that helps.

[mikerayjones]

Hi Christian

The page is at http://alison.ray-jones.org.uk/. Meanwhile I’ll check out those videos, thanks.

[ruenel]

Hello @mikerayjones,

Please edit your page back in Cornerstone and make sure to remove the <p> tags in your headline element.

Please let us know how it goes.