Collection pages table formatting issue on mobile

152 0 33


I have recently added a table on the collection pages which includes 3x images with a title link underneath. It looks great on desktop/tablet view however it looks very small on mobile view as all the content seems very tight together.

Is there a way to stretch it out so the images fit the width of the screen with the title/link appearing underneath so its formatted correctly for mobile view?

I have a screenshot below which show explain/show the issue clearly.

URL of example collection link is:


Shopify Partner
8581 2009 2713


Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (max-width: 749px) {
.scrollable-wrapper th, .scrollable-wrapper td {
    text-align: left;
    border: 1px solid var(--color-border);
    padding: 2px 2px;


If helpful then please Like and Accept Solution | Email: | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →