Hello
I have added a table on my collection pages which includes 3 small banners with text underneath which looks great on desktop/tablet view but it’s quite squashed and compacted together on mobile view and the user can’t see the banners that well as they are quite small.
I have put together a quick mockup on how I’d like the banners to look like for mobile view as this makes it look tidier, you can also see how it currently looks on mobile view below too.
I am using the debut theme and a live URL collection link to view the code is:
https://display-sign.co.uk/collections/chalkboards
Any help would be greatly appreciated!
Hi @gwilliams
Instead of table - you have to first convert it into DIV format if you need desired view.
I can see you want to display image and tile with 50% width next to each other on mobile view.
But with current table format it is hard to achieve with unnecessary code.
How can I convert it to a div without changing/ammending the current view it is on desktop view?
I am 100% sure but this tool can help.
https://divtable.com/converter/
If you find it difficult - you can try to contact our team for this change.
I’ve copied and pasted the table code and it’s messed up the formatting for desktop view:
Yes then It will not possible with just copy paste.
Because theme also contains it’s own style rules.
Better to take help from Shopify Experts for this change if you are not familiar with CSS and HTML part.
