1

I have a simple 2 column layouts using a hybrid fluid design. I want the columns to stack on top of each other on mobile screens. I have a two-columns class table that wraps around my column class tables. On my column class tables i have style="display: inline-block; vertical-align: top; width: 100%; max-width: 300px; border-spacing:0; background-color: #D93644;". This table holds my img tag on this one column. My other column holds the writing content.

This section alone should be should be responsive already due to the inline-block, width and max width styling but it doesn't stack on top of each other on smaller screens and I cannot for the life of me figure out why and its probably something so so simple. Really need help with this. Non-responsive non fluid iphone x dimensions

<!-- START 1ST TWO COLUMN -->
         <tr>
            <td>
               <table width="100%" style="border-spacing: 0;" role="presentation">
                  <tr>
                     <td class="two-columns" style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; font-size: 0; text-align: center;">
                        <!--[if (gte mso 9)|(IE)]>
                           <table width="100%" style="border-spacing:0;" role="presentation">
                           <tr>
                           <td width="300" valign="top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
                        <![endif]-->

                        <table class="column" role="presentation" style="display: inline-block; vertical-align: top; width: 100%; max-width: 300px; border-spacing:0; background-color: #D93644;">
                           <tr>
                              <td class="padding" style="background-color: #D93644; padding-top: 0; padding-right: 0px; padding-bottom: 0; padding-left: 0px; font-size: 0;">
                                 <table class="content" role="presentation" style="border-spacing: 0; text-align: left;">
                                    <tr>
                                       <td style="background-color: #D93644;">
                                          <img class="two-col-img" width="280" style="max-width: 280px;" height="215.7" src="http://ibb.co.com/images/c81e0cd1b8b486f30644ee03f4a1988e.png" alt="airplane" border="0" title="airplane with red background">
                                       </td>
                                    </tr>
                                 </table>
                              </td>
                           </tr>
                        </table>

                        <!--[if (gte mso 9)|(IE)]>
                           </td><td width="300" valign="middle" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;">
                           <![endif]-->

                        <table class="column" role="presentation" style="display: inline-block; vertical-align: top; width: 100%; border-spacing:0; max-width: 300px;" >
                           <tr>
                              <td class="padding" style="padding-top: 0; padding-right: 15px; padding-bottom: 0; padding-left: 15px; font-size: 0;">
                                 <table class="content" role="presentation" style="border-spacing: 0; text-align: left;">
                                    <tr>
                                       <td>
                                          <p style="font-size: 20px; font-weight: bold; color: #808080;">We Can Give
                                             Your Career Wings</p>
                                          <p style="font-size: 12px; color: #808080;">Ascent Aviation Services hold one of only two Class IV CFR Part 145 license that allows us to specialize in the operation of every aspect of aircraft maintenance (Narrow and wide body, small to large, regional to long-haul).</p>
                                       </td>
                                    </tr>
                                 </table>
                              </td>
                           </tr>
                        </table>

                        <!--[if (gte mso 9)|(IE)]>
                           </td>
                           </tr>
                           </table>
                        <![endif]-->
                     </td>
                  </tr>
               </table>
            </td>
         </tr>
         <!-- END 1ST TWO COLUMN -->
bobby Fasco
  • 11
  • 2
  • This works for me in the browser and looks okay at a quick look. Was there a particular mobile that you couldn't get it working for that we should test? Perhpas some other code is interfering? – Nathan Jun 03 '22 at 01:28
  • interesting that it works for you, are you saying the columns are stacking and being responsive for you on smaller screens? I'm using my inspect tools and changing the mobile device and screen dimensions in the toggle device toolbar and the columns are not stacking or being responsive. I put a picture, so you can see. – bobby Fasco Jun 03 '22 at 15:52
  • I would say then that there's something else in the code that is blocking it. So, perhaps an image that is not responsive (add max-width:100%, perhaps)? – Nathan Jun 05 '22 at 22:13
  • Try deleting sections until it works- then you will know which section is causing the issue. – Nathan Jun 05 '22 at 22:14

0 Answers0