Table adjust as per desktop / mobile view

Shopify Discussion
1

Hi Guys, can someone help me to adjust table size as per the screen (desktop and mobile). I create a page and link it in footer ‘size guide’ for sizing details but In mobile view its wider, and in desktop it’s smaller (refer screen shot below). how can i adjust(align) this table with the text below which works with mobile and desktop perfectly?

URL - https://deshoeshop.com

any help please?

footer
footer1214×557 79.8 KB

desktop view
desktop view1075×599 49.7 KB

mobile view
mobile view474×616 34.2 KB

2

Hi @DSS5
Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag
3

Hello @jasa11

Its Artzen Technologies! We will be happy to help you today.

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
@media screen and (min-width: 990px){
.page-width.page-width--narrow {
    max-width: 95.6rem;
}
}
@media screen and (max-width: 500px) {
.rte.scroll-trigger .tg {
    table-layout: unset!important;
}
.rte.scroll-trigger .tg td {
    padding: 9px 10px;
}
.rte.scroll-trigger .tg .tg-3plc {
    font-size: 11px;
}
.rte.scroll-trigger .tg .tg-ua6r {
    font-size: 11px;
}
.rte.scroll-trigger .tg .tg-jm7y {
    font-size: 11px;
}
}

after that :–

desktop view

Artzen_tech_1-1692703785064.png
Artzen_tech_1-1692703785064.png1286×684 39.1 KB

mobile view

Artzen_tech_0-1692703739481.png
Artzen_tech_0-1692703739481.png362×512 17.1 KB

Let me know if need further assistance
Regards,
Artzen Technologies

4

Hi after using code above. desktop view is good but not for mobile view. see screenshot please. any advise here. thanks

mobile view
mobile view497×643 36.7 KB

5

@DSS5

Please use this css code

@media only screen and (max-width: 600px) {

table.tg {
    width: auto;
}

}
6

Hello @DSS5

Its Artzen Technologies! We will be happy to help you today.

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
@media screen and (min-width: 990px){
.page-width.page-width--narrow {
    max-width: 95.6rem;
}
}
@media screen and (max-width: 500px) {
.rte.scroll-trigger .tg {
    table-layout: unset!important;
}
.rte.scroll-trigger .tg td {
    padding: 9px 10px;
}
.rte.scroll-trigger .tg .tg-3plc {
    font-size: 11px;
}
.rte.scroll-trigger .tg .tg-ua6r {
    font-size: 11px;
}
.rte.scroll-trigger .tg .tg-jm7y {
    font-size: 11px;
}
}

Copy

after that :–

desktop view

Artzen_tech_0-1692784396132.png
Artzen_tech_0-1692784396132.png400×213 23.4 KB

mobile view

Artzen_tech_1-1692784396530.png
Artzen_tech_1-1692784396530.png283×400 39.7 KB

Let me know if need further assistance
Regards,
Artzen Technologies

7

sorry mate, not working. i add this code at the bottom of base.css but not working. thanks

8

hi mate, thanks for your help but i don’t have theme.css, so tried base.css and it is not working in it. not sure why but not working.