How can I make my text wider while still keeping it mobile friendly?

Support
#1

My page is test.worldhorizonsusa.org/church-planting-2

I made the section that my text sits in three columns wide and put the text in the center column. I want to make the text wider across the screen. I’ve tried padding but that makes the text way too narrow on mobile.

#2

Hi there,

What you can do it to set the left and right margin of the section to auto then add an inline CSS to section like max-width: 500px;.

This way, the section will display up to 500px without making it too narrow on mobile:

Hope this helps.

#3

This doesn’t seem to have made the text itself any wider.

#4

Hi there,

Sorry for the confusion.

Instead of adding three columns in one section and placing the text content in the second section, what you can do is to just create one section with one column.

Then if you add a maximum width to the section’s inline CSS, the section content will not fill the entire width of the section. Whatever the value for the max-width you will add will be the width of the section.

And to center the section, you will have to set its left and right margin to auto.

Hope this is clear.

#5

This is better, the width seems correct but it is not properly centered.

#6

Hi There,

Yeah about that, Columns by default are floated to left and has a default margin-right: 4%; so you can not center the columns with margin: auto;

What you can do is add the max-width: 500px; inline CSS to ROW instead and set the ROW left and right margin to auto

Hope it helps,
Cheers!

#7

It worked! Thank you so much.

#8

You’re welcome.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.