Why Isn't My Section a responsive layout for Mobile?

Support
#1

Guys -
I’m having a heck of a time translating my desktop version of my homepage to each lower screen size, but I’m going to present one specific issue for now:

On my homepage, for one section I have designed a pretty standard 1 row 4 colum setup:

image
image948×231 62.7 KB

I have a section > 1 Row > 4 Columns

Each Column: 1. Personify: Hero Heading and 2. Text

Now, looks normal on desktop, but it isn’t having responsive behavior for lower screen sizes and I’m trying to figure out why. Here is what it looks like on mobile - showing just 1 of the 4 columns properly, for example:

image

Why isn’t it properly bringing the other 3 columns into view so that it is a stack of 4 x 1? I’ve tried everything I can think of without redesigning the entire thing.

#2

Hello @adkseorev,

Thanks for writing to us.

In order to help you with your concerns, we need to check your settings. I would request please share the admin login details meanwhile I would suggest you troubleshoot a few of the common issues before we investigate your settings. Please share your details in a secure note. Please provide the following details

  • WordPress Login URL
  • Admin-level username and password
  • Exact page URL

You can find the Secure Note button at the bottom of your posts

secure-note
secure-note1040×250 15.3 KB

Thanks

#3

Hello Bobby,

First, your Row element is not centered because you have added a 300 pixel right margin.
image

If you want this to the center of the page, the right and left margins would need to be set to “auto”.

2nd: You have a 4-column row. At the moment, it is not responsive because you have not set the number of columns for different screen sizes.

image
image369×523 32.6 KB

Click the word “Template” to launch the responsive layout selector, where you can set the number of columns for specific screen sizes.
image

For more details about Responsive Styling, kindly check out this documentation:

And you might be interested in video tutorials here:

Best Regards.

#4

So I’ve got the right and left margins set to auto, as shown in the screenshot:

image
image1912×907 304 KB

Yet, also in the screenshot, you can see the 3 column row isn’t being centered.

#5

And then, the same thing with the following section - which is a precreated section in the Personify Mogul theme. Why isn’t this centering properly on all screens?

image
image1737×836 119 KB

#6

I noticed it is something to do with that specific page, not the sections - as I have the same sections on other pages and they are working properly on all screens: (on this page: https://staging.adkseorev.com/cornerstone/edit/2296 ).

So, I’m wondering if it is a page-level setting of some sort (on the homepage) that is causing the responsive strangeness?

#7

Hello Bobby,

I have investigated your homepage thoroughly. I found out that this shortcode: [client_logo_marquee set="homepage"] is causing the issue. Temporarily remove the shortcode from your page and see that the elements will become centered.

Since this is a 3rd party shortcode, please contact the creators of this plugin shortcode and ask them how you can center their element responsively.

Best Regards.