Grid discrepancy between Cornerstone and browser on mobile

Hello there,

We cannot see a two column grid displaying on our mobile screens, but the grid is present when the same page is viewed in Cornerstone.

Please see the attached images.

How can we set this grid for mobile?

Kind Regards,

Spencer

Hey Spencer,

It looks like the builder’s media query isn’t generated. That could be caused by custom CSS added in the Code Editors. Try temporarily removing any custom CSS.

If you don’t have any CSS, please give us the following info in a Secure Note so we could check your setup.

  • Page URL where we could see the issue
  • WordPress Login URL
  • Admin username and password

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

Thanks.

Hi @christian

Thanks for your reply. I don’t think I have added CSS that is forcing this full width. It only seems to be forcing it on the frontend - it’s fine in Cornerstone.

Kind Regards,

Spencer

Hi Spencer,

I have checked the shortcode [products orderby="id" limit="4"] in my local environment but it shows the single-column output in the Cornerstone. I have created a Test page on your website and found the same. If you are still facing this, please let us know the page URL where you are seeing this.

Thank

Hi @tristup,

I am still seeing this. For example, the home page that uses the shortcode you displayed above.

How do we add columns for mobile screens? There doesn’t seem to be an option in the shortcode.

Kind Regards,

Spencer

Hello Spencer,

Regretfully there is no option to add the column for the mobile devices since it is already responsive. In case if you want to change the column layout for the desktop mode you can add this "columns="4" " attribute to change the column layout.

Cmoplete shotcode would be like this

[products orderby="id" limit="4" columns="4" ]

Please feel free to change the column value as per your design. You can also check the shortcode doc for more product attributes information.

In case if you want to customize the product layout for the mobile mode you need to contact a developer who can assist you with your concern or you can avail of our services called One where customization questions are answered. Please note we don’t provide custom development support. It is out of the support scope.

Thanks for understanding