Convert horizontal block to vertical in case screen size smaller than a specified value

Question

In the following code, I would like the horizontal three-column block to drop and stack on top of each other in case the size of the container becomes less than X pixels (for sm

Answer 1

Do you want the layout to only be three across or three down? Or can each container wrap to the next line as the screen size decreases?

Your current code simply resizes the images, text, and containers when the screen is shrunk down. If you just want the containers to wrap as the screen shrinks, you can accomplish this by using <div> tags and float:left; and max-width CSS.

The main issue you're having is that each container is a completely separate table, each of which is in a completely separate table cell inside another table.

Take a look at this (run the code snippet and use the Full Page link to test it out):

.container {
    background-color: #ffffff;
    max-width: 300px;
    float: left;
    margin: 10px;
    padding: 20px;
}

<table border="0" valign="top" cellpadding="10" style="font-family:arial,helvetica,sans-serif;min-width: width 500px;background-color: #f6f4f0;">

  <!-- Title: BEGIN-->
  <tr>
    <td>
      <h2>Title</h2>
    </td>
  </tr>
  <!-- Title: END-->

  <tr>
    <td>
      <div class='container'>
        <h3>Lorem ipsum </br>dolor sit</h3>
        <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;" width="1024"></a><br> Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
      </div>
      <div class='container'>
        <h3>Lorem ipsum </br>dolor sit</h3>
        <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;" width="1024"></a><br> Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
      </div>
      <div class='container'>
        <h3>Lorem ipsum </br>dolor sit</h3>
        <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;" width="1024"></a><br> Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
      </div>
    </td>
  </tr>
  <tr>
    <td height="30">
    </td>
  </tr>
</table>

If this isn't what you're looking for, please let me know.

Also, just an fyi, there are several areas of your code that you should rethink. Specifically, any time you're specifying a size, you should be putting the unit with it. i.e. width="1024"....1024 what? If it's pixels, use 1024px. And to take that point a little further, in the <img> elements you already have CSS that says width: 100%;. So, also having width="1024" is redundant and confusing.