Help with making a table in a blog post more mobile responsive?

[S0confused]

I have a 2 column, 1 row table in the content of a blog post, 1 cell has an image, the other has text. It looks good on desktop, but terrible on mobile - the picture is tiny, and the words get all squashed and go off screen. Is there a way to transpose the columns and rows on mobile, so the image cell is over the text cell? 

Here is a (simplified) version of the table html code:

<table width="100%">
<tbody>
<tr>
<td>
<div style="text-align: start;"><img src="image" style="float: none; display: block; margin-left: auto; margin-right: auto;"></div>
</td>
<td>
<p><meta charset="utf-8">Words, words, and more words.</p>
<h4><span><br data-mce-fragment="1"><strong data-mce-fragment="1"></strong></span><a href="link"><span>Shop</span></a></h4>
</td>
</tr>
</tbody>
</table>

[suyash1]

@S0confused  using custom css with flex it is possible, it will need media query css as well, can you share this page link?

[S0confused]

https://kokoroshoujoshop.com/blogs/news/fall-2024-anime-season

[AnneLuo]

Hi, @S0confused 

Can you share your page url so that I can assist you?

[S0confused]

https://kokoroshoujoshop.com/blogs/news/fall-2024-anime-season

[AnneLuo · Accepted solution]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
.article-template__content p {
  white-space: break-spaces;
}
@media screen and (max-width: 749px) { 
  table tr {
    display: flex !important;
    flex-direction: column;
  }
}


</style>

Result:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[S0confused]

Thank you so much! That works perfectly!!