CODEWITHSUNDEEP
htmlcssemailsasszurb-foundation
gardinermichael
gardinermichael

Reputation: 57

Foundation for Email: Vertical-Align Not Working on Mobile

I'm attempting to vertically align a headline and byline next to an image. The meta text should appear in the middle of the image height. It works great on desktop, but mobile refuses to work. I've attempted to use valign as mentioned here, but it didn't work. It bumps the text to another row on mobile. 

  <row>
    <columns large="1" small="1" class="no-padding"></columns>
    <columns large="7" small="10" class="no-padding little-story">
      <row>
          <columns small="6" large="7">
            <img class="small-float-left" src="https://placehold.it/232x181?text=image" alt="" mc:edit="little_img_three">
          </columns>
          <columns small="6" large="5" class="meta">
            <h6 class="hed" mc:edit="hed_three"><a href="#">Headline</a></h6>
            <div class="subhed" mc:edit="subhed_three">by Person Person</div>
          </columns>
      </row>
      <p mc:edit="little_story_three">Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy</p>
    </columns>
    <columns large="1" small="1" class="no-padding"></columns>
  </row>

.little-story {
  .meta {
    vertical-align: middle;
    .hed {
      margin-bottom: 3px;
      margin-left: 15px;
      text-align: center;
    }
    .hed a {
      font-family: $sans-serif-fonts;
    }
    .subhed {
      color: #222;
      margin-left: 15px;
      text-align: center;
    }
  }
}

Here's what it looks like on Desktop:

enter image description here

and here's what it looks like on Mobile:

enter image description here

I tried hard coding a min-height/height/max-height on the .meta container, but even that didn't work: the two child components still stick to the top.

I also tried hardcoding the vertical align on the row, as well as the columns, but can't seem to crack the code. Any help would be wholeheartedly appreciated.

Upvotes: 0

Views: 544

Answers (1)

gardinermichael
gardinermichael

Reputation: 57

Solution, thanks to @EGC:

  <row>
     <columns large="1" small="1" class="no-padding"></columns>
     <columns large="7" small="10" class="no-padding little-story">
       <row>
           <columns small="6" large="7" valign="middle">
             <img class="small-float-left" src="https://placehold.it/232x181?text=image" alt="" mc:edit="little_img_three">
           </columns>
           <columns small="6" large="5" class="meta">
             <h6 class="hed" mc:edit="hed_three"><a href="#">Headline</a></h6>
             <div class="subhed" mc:edit="subhed_three">by Person Person</div>
           </columns>
       </row>
       <p mc:edit="little_story_three">Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy Copy</p>
     </columns>
     <columns large="1" small="1" class="no-padding"></columns>
   </row>

Upvotes: 1

Related Questions