Stack <td> on <table> mobile - Dawn 2.1

Solved

Stack <td> on <table> mobile - Dawn 2.1

kokawa
Tourist
3 1 0

Hello,

 

Hope you're doing well.

 

I'm on the Dawn 2.1 theme, and I'm having a problem in a blog post with <table>


As you can see from the two images, when I am on mobile, the two <td> blocks are next to each other while I would like the two <td> elements to be one after the other on mobile.

 

desktop.png

 

mobile.png

 

Could you help me with the part of the code to add in :

 

@media only screen and (min-width: 750px) {}

 

Thanks in advance.

Have a nice day,

Alexandre

Accepted Solution (1)
kokawa
Tourist
3 1 0

This is an accepted solution.

Hello all,

 

I found a solution.

Here is the code I've used:

 

@media only screen and (max-width: 749px) {
table:not([class]) tr {
display: flex;
align-items: center;
flex-direction: column;
}
}

@media only screen and (max-width: 749px) {
table:not([class]) td:first-child:nth-last-child(2),
table:not([class]) td:first-child:nth-last-child(2)~td{
width: 100%;
}
}

 

Hope it could help you.

 

Best,

Alexandre

View solution in original post

Replies 3 (3)

SmallTask
Shopify Partner
973 41 55

Hi @kokawa ,

 

Kindly share your store url, so that we can check and provide you the solution.

banned
kokawa
Tourist
3 1 0

Hello @SmallTask ,

 

Thank you for your quick answer.

 

Here is the page : https://www.kokawa.fr/blogs/booster-votre-confiance/3-actions-simples-pour-attirer-le-positif-et-etr...

 

Here the store URL : https://www.kokawa.fr/

 

Thank you

kokawa
Tourist
3 1 0

This is an accepted solution.

Hello all,

 

I found a solution.

Here is the code I've used:

 

@media only screen and (max-width: 749px) {
table:not([class]) tr {
display: flex;
align-items: center;
flex-direction: column;
}
}

@media only screen and (max-width: 749px) {
table:not([class]) td:first-child:nth-last-child(2),
table:not([class]) td:first-child:nth-last-child(2)~td{
width: 100%;
}
}

 

Hope it could help you.

 

Best,

Alexandre