Why do my Shopify tables appear odd on mobile?

oliver28
Visitor
2 0 0

Hi i have made this area of my website which i really like and is perfect on desktop. But it looks bad on mobile. How can i fix that?

 

https://kaffepro.dk/pages/sage-reparation-service-og-dele

Replies 3 (3)

PaulNewton
Shopify Partner
6274 573 1319

You either need to adjust the table so products will responsively wrap to the next row as the screen gets smaller typically with width:100%; or using min-width,etc.

Or the healthier long term solution is rewrite it using the grid system that is part of the venture theme and save tables for tabular data and not layout presentation.

An overview of the problem of using tables for responsive layout https://css-tricks.com/accessible-simple-responsive-tables/ 

At minimum you should adjust it so the scrollbars always show up so users know the drag left|right to see things that are cut off screen.

 

If you need this fixed or rewritten I do such customizations and can be hired at paull.newton+shopifyforums@gmail.com 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


oliver28
Visitor
2 0 0

Hi 

Thank you for your reply. I am really not strong in coding, which is why i used the build in Table function. Is there a way to make this possible to implement without knowing code.

PaulNewton
Shopify Partner
6274 573 1319

. Is there a way to make this possible to implement without knowing code.

Only if your theme came with a section that let you add products to a grid using the visual editor.

Which is more likely a No as normally such sections are dynamic ones only available on the homepage and to make it available elsewhere would need coding.

If you dont want to figure out code you can spend time

  • examine your theme for other templates that might offer that layout
  • researching free templates and layouts then figuring out to replicate them
  • looking on the internet for a free visual table designer that makes responsive tables.

 

Or just hire someone to fix it properly faster. 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org