Prestige theme image table is not mobile responsive

Store Design
1

I have a table with images & headings, but on mobile it is not responsive.

https://bellecollectiveandco.com.au/pages/our-fashion-labels

Can you please provide recommendations to ensure it’s responsive, and the two columns split to one on mobile.

thanks

1 Like
2

Hi @lauren2022 ,

To change you follow the instruction:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
@media (max-width: 600px) {
    .TableWrapper tbody {
        display: block !important;
    }
    .TableWrapper tr {
        height: auto !important;
        display: block !important;
    }
    .TableWrapper tr td {
        width: 100% !important;
        display: block !important;
        height: auto !important;
    }
}

I hope it would help you.

3

@lauren2022

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

@media screen and (max-width: 640px) {
.Rte table, .Table {
    width: 100%;
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));
    border-collapse: separate;
    white-space: break-spaces;
}
}

Thanks!

4

Thank you! This worked best for me. Much appreciated

5

Thank you! This did work for me, but the other code provided worked better for this particular layout.
Appreciate your assistance.