Table adjust as per desktop / mobile view

Shopify Discussion

Topic summary

A Shopify store owner is experiencing table sizing issues on a size guide page linked in the footer. The table appears too wide on mobile devices and too small on desktop, not aligning properly with surrounding text.

Attempted Solutions:

Two community helpers (dbuglab and Artzen_tech) provided CSS code solutions:

  • Adjusting .page-width--narrow max-width for desktop
  • Modifying table layout and padding for mobile responsiveness
  • Setting table-layout: unset and specific font sizes for table cells

dbuglab suggested adding CSS to set table width to auto on screens under 600px.

Current Status:

The issue remains unresolved. The original poster tried multiple CSS solutions but reported:

  • Desktop view improved but mobile still problematic
  • Code added to base.css (since theme.css doesn’t exist in their theme) isn’t working

The discussion is ongoing with no successful resolution yet. Screenshots were shared showing the persistent mobile view issues.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
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.