Align table middle and flex it properly on mobile

[Ksoldier]

Hi, im trying to create tiles to redirect on the collection page like this - https://www.fossil.com/en-au/bags/

Can someone help by align the table into the center and remove the border.

Also when in mobile the first 2 images distort. I've tried to fix it but no luck. or if someone has a better way to achieve this that would be great too - https://www.kidstuff.com.au/collections/test

[Simonsron]

@media screen and (max-width: 719px){
.collection-table td>div{
   width:150px;
}
}

put this in your theme.css

[Moeed · Accepted solution]

Hey @Ksoldier 
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 </body> tag

<style>
.rte table th, .rte table td, .pxs-newsletter-text table th, .pxs-newsletter-text table td {
    border: none !important;
}
@media screen and (max-width: 719px){
.collection-table td>div{
   width:150px;
}
}
</style>

This code will also remove the border as well as will fix the issue on your mobile

[Ksoldier]

Hi 

thank you so much it looks like that worked. Just one more query, how do i make it so that only the table in collection pages get hidden. There is another table in a /pages/ that i need to keep the table