This feature is available on all Goodshuffle Pro Plans.
If you're using the Website Integration to display your inventory on your website, you may have noticed that on mobile devices, the items appear in a single column. While this default layout is mobile-friendly, some users prefer a tighter grid that shows more products at once—especially for high-volume categories like decor or party supplies.
With a small CSS update, you can create a clean two-column grid layout for mobile screens under 766px wide.
How to Apply the Mobile Grid Layout
To create a two-column grid layout on mobile, add the following CSS to your sitewide CSS so it will load on pages:
@media screen and (max-width: 766px) {
gspro-item-list .gspro-o-card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 288px;
grid-gap: 10px;
justify-items: center;
padding-bottom: 12px;
}
}What It Looks Like
Here’s an example of what the two-column mobile grid looks like in action:
Step-by-Step Instructions
Log into your website builder.
If you're using platforms like Wix, Squarespace, or WordPress, look for a section where you can edit or create site-wide CSS.
Locate your CSS editor.
In most builders, you’ll find this under Site Settings, Design, or Advanced > Custom Code.
Paste the code above.
Make sure it’s included within your site's main stylesheet or wherever you manage mobile-specific styles.
Save and publish your changes.
Preview your site on a mobile device.
You should now see your Goodshuffle Pro inventory displayed in a neat two-column grid!
Tips for Best Results
This code only applies to screens 766px wide or smaller, so your desktop and most tablet layouts won’t be affected.
Be sure your site’s theme or builder doesn’t override this custom code—some themes require you to mark CSS as
!important.
Need Additional Support?
Click the blue chat bubble in the bottom corner of your screen to message our support team—we’re happy to help!