Collection pages table formatting issue on mobile

gwilliams
Pathfinder
152 0 33

Hello

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: https://display-sign.co.uk/collections/chalkboards

collection-table-mobile.png

dmwwebartisan
Shopify Partner
8581 2009 2713

@gwilliams 

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;
}
}

Thanks!

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