My e-shop features a product description block using the code snippet below. While it looks great on larger screens, such as a 17" desktop monitor, it appears poorly on smaller smartphone screens.
Friends have suggested that I learn Bootstrap/Flexbox and responsive web design basics to address this issue. However, with so many products on our site, manually changing the code for each one would be a time-consuming task.
I am seeking a solution to transform the code below so that it displays effectively on smaller smartphone screens.
The current code for the product description block is simple, utilizing <table>, <tr>, and <td> elements. On the left side, there is an <td> containing an inline-styled <div> with an <img> for the product image. On the right side, another <td> contains the paragraph for the product description text.
An optimal solution for small screens would involve displaying the <td> with the <img> above the <td> with the product description paragraph. However, we are unsure how to achieve this. Your assistance would be greatly appreciated.
Here is the code snippet ↓ (JS FIDDLE: https://jsfiddle.net/zd6xrv6q/ )
<table align="center" border="0" width="100%" style="border:1px lightgray solid;box-shadow: 1px 2px 5px gray;margin-top:15px">
<tbody>
<tr>
<!-- LEFT IMAGE-->
<td width="50%" valign="middle" style="text-align:justify;border-top: white 10px solid;border-bottom: white 10px solid;border-left: white 10px solid">
<div style="text-align: center;margin-bottom:0px">
<img style="WIDTH: 100%" src="http://www.allcarbrandslist.com/wp-content/uploads/2015/03/mustang-symbol.jpg" >
</div>
</td>
<!-- RIGHT TEXT -->
<td width="50%" valign="middle" style="text-align:justify;padding:3%;vertical-align:middle;color: gray;border: white 10px solid; background: linear-gradient(#F7F7F7 90%, #EDEDED 100%)">
<h2 style="color:black">Random Section header</h2>
<p>RANDOM TEST PARAGRAPH: A ruler frowns a built slogan. The toy copyrights a fruit on top of the verbatim commentator. A fond mania disciplines the increased finger. The prejudice founds a warped capitalist. Will the crossing grandmother bite the dismal prophet?</p>
</td>
</tr>
</tbody>
</table>