Responsive Page Error

[Billr]

I have a page that has four columns. Each column has text. When I reduce the width of the page by dragging the right border of the page to the left, the text in the columns starts to flow together, as shown in the image, instead of flowing vertically.

Please go to onestopwebsite.website. From the menu: Plan Website–>Choose A Theme. Scroll down the “Choose A Theme” page until you see the five columns …Integrity, Renew, Icon, Ethos. Change the width of the page by dragging the right border in.

I will send you the id and password for the page in a secure note.

I would appreciate any help you can provide.

Thank you
Bill

[ruenel]

Hello There,

Thanks for writing in!

I have logged in and I can confirmed the issue. Further investigation shows that this issue occurred because you have set a width to your column. To resolve this, you will have edit each of your column settings and set a maximum width of at least 98% or 100%. This is necessary when setting a width for the reason that when the width of the column is already narrower than 180 pixels, the maximum width will be applied.

Hope this explains it briefly.

[Billr]

This worked great. Thank you very much.
Is it possible to point me to the relevant documentation for this?

I am not sure I understand why we adjusted the text parameter and not the column parameter.

Thanks a lot
Bill

[ruenel]

Hello Bill,

You can check out the css documentation regarding the width of an element here:

width | CSS-Tricks

Regarding your adjustments, you may have set 180 as a width or for a particular screen size which what might be the one you have in mind. I am just guessing anyway.

Regards.

[Billr]

Thank you very much for the added information
Bill

[Prasant]

You are most welcome.