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

[kokawa]

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.

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

[SmallTask]

Hi @kokawa ,

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

[kokawa]

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