Columns not lining up correctly on mobile device

Support
#1

On my website (Services page) I have three columns with titles and text underneath each title. It looks great on my laptop, but the titles are not above each set of text on a mobile device. All three titles are together followed by all three sets of text. How can I get the titles and text to display correctly on a mobile device?

#2

Hi There @eutaw

Thanks for writing in! Upon checking, I see that your credentials are incorrect so that I could not login.

We have a responsive text shortocde that you can use (http://demo.theme.co/integrity-1/shortcodes/responsive-text/) or else you can try following this video walk-through here (https://www.youtube.com/watch?v=_ia5Lswi3ak) and make sure that your have setup your responsive text correctly. Check the following post as well to see a detailed guide (https://theme.co/apex/forum/t/header-text-is-not-responsive-pro-theme-applied-all-tricks-from-forums/48971/4?u=mldarshana).

If you’re using a caching plugin on your site, make sure to purge your server cache and also clear your browser cache before testing (refer: https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/).

Hope that helps.

#3

I corrected the login information. I am using Renew. Do the integrity shortcodes work for Renew?

#4

Hi @eutaw,

Thank you for writing in, the problem on that setup is you placed the title and its corresponding text is a separate ROW. Please only have one ROW, and place the title and its corresponding text in the same Column.



Hope it helps,
Cheers!

#5

Thank you. I have it lining up properly now on a test page. (Test page is in my secure settings.) I created a template from my test page and inserted it in my Services page, but the Services page still does not display correctly on a mobile device. Shouldn’t the section from the template perform identically on both pages?

Also, I would like a little more space between each column on mobile devices. Can you point me in the right direction, please?

#6

Hi @eutaw,

Please add a Gap element at the bottom of the first and second Column.

Then utilize the Hide During Breakpoint feature of the Gap element to hide it on desktop view and only show on mobile.

Hope it helps,
Cheers!

#7

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