Text width on mobile devices

[jhayles]

Hi. Can you tell me which settings will adjust the text width on mobile devices? I’m assuming it’s a padding selection, but I’m not 100% sure. On my site www.experiencethesprings.com when you scroll down to the first section that says “Hiking and Biking Trails” for some reason it has “Biking” and “Trails” on separate lines. When you scroll to the next section it also has “Great” and “Brew” on separate lines. There appears to be plenty of width space to make these words appear on the same line. Can you help me adjust that for mobile devices?

[marc_a]

Hi @jhayles,

Thanks for reaching out.

I suggest that you set the padding of your quote element to 0 and this will help you fix the text width issue of your mobile.

With padding:

Without padding:

But if you wish to remain the looks of your desktop, we need to add a custom CSS code that will only reflect on the mobile view. Please add the code below in your Pro > Theme Options > CSS.

@media(max-width: 767px) {
	.x-quote {
	    padding: 0 !important;
	}
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

[jhayles]

I did all of that, and wanted to add just a small padding on mobile, so I put padding: 5 !important;

But now it all shifted to the right on mobile.

Also, my header is missing the search icon and bell icon that should be there. Any reason why that is?

[ruenel]

Hello @jhayles,

You are having all these padding issues because you have disabled/turn OFF the global container in your row settings. Here’s what I want you to do. Kind edit your homepage and save it as a template. Create a new test page and load the homepage template. In this new test page, make sure to enable the Global Container in the row settings of each section and then test your site. Doing this will help you compare and see the difference of the padding when enabling/disable the global container option in the row settings.

Best Regards.