Grid discrepancy between Cornerstone and browser on mobile

Support
#1

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.

cornerstone
cornerstone459×739 211 KB
Noble_Collection_UK_Wholesale___Creators_of_Finely_Crafted_Treasures
Noble_Collection_UK_Wholesale___Creators_of_Finely_Crafted_Treasures1385×862 277 KB

How can we set this grid for mobile?

Kind Regards,

Spencer

#2

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.

secure-note
secure-note1040×250 15.3 KB

Thanks.

#3

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

#4

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.

Screenshot-669-
Screenshot-669-1200×690 89.3 KB

Thank

#5

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

#6

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

#7

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