How can I adjust table size for mobile view?

[isabellemaria]

Hi there,

how do I get my table here https://taneraskin.com/policies/shipping-policy to adjust to the page width when viewed in MOBILE version? I would like it to make line breaks like here: https://www.hellobody.de/versandkosten-lieferung/?shp_3=true . Currently, the table just stays as it is and increases the page width of the mobile version…

Best,

Isa

[zaczee]

Hi @isabellemaria

Add this CSS code

Online Store > Themes > Edit code > Assets > custom.css or theme.css

table.large-8 {
      table-layout: auto !important;
    width: 100%;
}

[BSS-Commerce]

Hi @isabellemaria

Is this the result you want?

• To make it really work on your website, follow these steps:
  Step 1: Please go to Sale channels => Themes => Edit code


Step 2: Then, you find the file “base.css” and paste the following CSS in it and save the file:

.large-8 {
    table-layout: auto !important;
    width: 100%
}

We hope that it will work for you.

[PageFly-Richard]

Hi @isabellemaria ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.scss->paste below code at the bottom of the file:

.shopify-policy__container .rte table {
    max-width: 100%;
}
.shopify-policy__container .rte table th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shopify-policy__container .rte table th,
.shopify-policy__container .rte table td {
    width: auto !important;
    font-size: 10px !important;
}
.shopify-policy__container {
    padding: 0 !important;
}

I hope it would help you
Best regards,

Richard | PageFly