Tables looking weird on mobile

Highlighted
New Member
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

0 Likes
Highlighted
Shopify Partner
2417 122 380

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 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Highlighted
New Member
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.

0 Likes
Highlighted
Shopify Partner
2417 122 380

. 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. 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes