Chart Size on Product Description Page (Mobile View)

Solved
AestheticPet
New Member
2 0 2

HI guys,

My site is www.aestheticpet.com.

I've added size charts to each page in my product descriptions as each product has unique specs, however, on the mobile version, the chart comes up crushed, whereas on the desktop version, the charts and its content is fine.

Is there a fix for this?

Cheers.

HardikDavra
Shopify Partner
2329 367 1003

This is an accepted solution.

Please place this code at the end of theme.scss

.rte table {
    table-layout: auto !important;
}
PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
HardikDavra
Shopify Partner
2329 367 1003

Thank you for the update.

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
AestheticPet
New Member
2 0 2

Perfect!

 

Thank you!

Wj07
New Member
2 0 0

I have similar problem, but i dont know where to put the code. where should i put it?

0 Likes
HardikDavra
Shopify Partner
2329 367 1003

@Wj07  Hello, Can you please share your store URL and highlight the section.

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
Wj07
New Member
2 0 0

This is my store: https://fluffyscene.com/products/copy-of-powered-by-coffee-and-frenchie-unisex-t-shirt

My sizing chart was crush on mobile view so I tried to make image for the sizing chart, but it looks a little bit blurry. Then I happen to land in this site so I wanted to know if i could fix this.

0 Likes
HardikDavra
Shopify Partner
2329 367 1003

@Wj07 Please place this code at the end of /Assets -> theme.scss

@media only screen and (max-width: 749px) {
.rte__table-wrapper .table {
min-width: 179% !important;
    width: 100% !important;
    table-layout: auto !important;
}
}



PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
erindonaghy
New Member
1 0 0

I am also having an issue with the mobile view of my size chart, and I am unsure of which code I need, and if theme.scss is the same as theme.liquid.scss

applause-lingerie.myshopify.com

 

Thank you!

Erin

0 Likes