Menu icon Foundation
Images on Mobile Devices stack order
 

Hi - Using the newsletter 2 email template as a starting point, we can have a right aligned image on the Desktop view, but when viewed on a Mobile Device, the image stacks UNDER the text and the Learn More link. This makes it look weird, is there a way to make the images stack above the text, not below it?

css

 

Hi - Using the newsletter 2 email template as a starting point, we can have a right aligned image on the Desktop view, but when viewed on a Mobile Device, the image stacks UNDER the text and the Learn More link. This makes it look weird, is there a way to make the images stack above the text, not below it?

Cal Anderson 11 months ago

OK so I found this link and that seemed to be what I am looking for.

 

http://zurb.com/university/lessons/get-your-responsive-emails-in-order

 

However, part of the instructions talk about re-ordering the content for the image comes before the text content. The link article appears to have been written before the latest version was released. So if I reorder the content, should I keep the class "first" and "last" as it looks now below, or reverse them? Originally I had the last class with the photo after the text copy but had to move it up so that they stacked corrected on mobile.

<table class="row" dir="rtl">
         <tbody>                                         
          <tr>
           <th class="small-12 large-4 columns last" dir="ltr">
            <table>
             <tr>
              <th><img class="small-float-center" src="photo.jpg" alt="Photo"></th>
             </tr>
            </table>
           </th>
           <th class="small-12 large-8 columns first" dir="ltr">
            <table>
             <tr>
              <th>
               <h2>Faculty and Staff Highlights</h2>

               <table class="button small radius">
                <tr>
                 <td>
                  <table>
                   <tr>
                    <td><a href="">LEARN MORE</a></td>
                   </tr>
                  </table>
                 </td>
                </tr>
               </table>
              </th>
             </tr>
            </table>
           </th>
          </tr>
         </tbody>
        </table>

 

 

Corey Schaaf 11 months ago

 Are you using the INKY language with SCSS or the CSS version. 

Cal Anderson 11 months ago

css

Rafi Benkual 11 months ago

Cal- looks like you found the right thing!

Cal Anderson 5 months ago

 I have a follow up on this one, if we want to have a header over the content so the header doesnt wrap next to the image, what is the best way to code that so that when mobile devices see if the image is above both the header and the paragraph. See images where it looks fine in desktop mode, but mobile puts the image in between the header and the paragraph. I would like the image to be above everything in Mobile mode, just not see any examples or method to make this possible. Any ideas?