Menu icon Foundation
Responsive issue

Hi,

I am trying to achieve a responsive email block that has 3 columns. Each column consisting of image, title and paragraph stacked on each other. When on mobile I want each column to be stacked on each other and the contents reordered with image to the left and the rest on the right. The code below works perfectly as I want on mobile, but on large the image is not stacking with the text.

<row>
  <columns>
      <row>
        <columns small="4" large="12">
          <img src="http://placehold.it/580x300" alt="image 1">
        </columns>
        <columns small="7" large="12" class="small-offset-1">
          <h5 class="text-center small-text-left">This is a title</h5>
          <p class="text-center small-text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
          <p class="text-center small-text-left"><a href="#">Learn more</a></p>
        </columns>
      </row>
  </columns>
  <columns>
      <row>
        <columns small="4" large="12">
          <img src="http://placehold.it/580x300" alt="image 2">
        </columns>
        <columns small="7" large="12" class="small-offset-1">
          <h5 class="text-center small-text-left">This is a title</h5>
          <p class="text-center small-text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
          <p class="text-center small-text-left"><a href="#">Learn more</a></p>
        </columns>
      </row>
  </columns>
  <columns>
      <row>
        <columns small="4" large="12">
          <img src="http://placehold.it/580x300" alt="image 3">
        </columns>
        <columns small="7" large="12" class="small-offset-1">
          <h5 class="text-center small-text-left">This is a title</h5>
          <p class="text-center small-text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
          <p class="text-center small-text-left"><a href="#">Learn more</a></p>
        </columns>
      </row>
  </columns>
</row>

I can solve this problem using .hide-for-large and .show-for-large classes, like this:

<row>
  <columns>
      <row class="hide-for-large">
        <columns small="4" large="12">
          <img src="http://placehold.it/580x300" alt="image 1">
        </columns>
        <columns small="7" large="12" class="small-offset-1">
          <h5 class="text-center small-text-left">This is a title</h5>
          <p class="text-center small-text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
          <p class="text-center small-text-left"><a href="#">Learn more</a></p>
        </columns>
      </row>
      <row>
        <columns small="" large="4" class="show-for-large">
          <img src="http://placehold.it/580x300" alt="image 1">
          <h5 class="text-center small-text-left">This is a title</h5>
          <p class="text-center small-text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
          <p class="text-center small-text-left"><a href="#">Learn more</a></p>
        </columns>
      </row>
  </columns>
  <columns>
      <row class="hide-for-large">
        <columns small="4" large="12">
          <img src="http://placehold.it/580x300" alt="image 2">
        </columns>
        <columns small="7" large="12" class="small-offset-1">
          <h5 class="text-center small-text-left">This is a title</h5>
          <p class="text-center small-text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
          <p class="text-center small-text-left"><a href="#">Learn more</a></p>
        </columns>
      </row>
      <row>
        <columns small="" large="4" class="show-for-large">
          <img src="http://placehold.it/580x300" alt="image 2">
          <h5 class="text-center small-text-left">This is a title</h5>
          <p class="text-center small-text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
          <p class="text-center small-text-left"><a href="#">Learn more</a></p>
        </columns>
      </row>
  </columns>  <columns>
        <row class="hide-for-large">
          <columns small="4" large="12">
            <img src="http://placehold.it/580x300" alt="image 3">
          </columns>
          <columns small="7" large="12" class="small-offset-1">
            <h5 class="text-center small-text-left">This is a title</h5>
            <p class="text-center small-text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
            <p class="text-center small-text-left"><a href="#">Learn more</a></p>
          </columns>
        </row>
        <row>
          <columns small="" large="4" class="show-for-large">
            <img src="http://placehold.it/580x300" alt="image 3">
            <h5 class="text-center small-text-left">This is a title</h5>
            <p class="text-center small-text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
            <p class="text-center small-text-left"><a href="#">Learn more</a></p>
          </columns>
        </row>
    </columns>
</row>

I would prefer to keep the code a little cleaner and hope it is possible to do this without the additional html. Or is this the only possible they at the moment?

Responsive

Hi,

I am trying to achieve a responsive email block that has 3 columns. Each column consisting of image, title and paragraph stacked on each other. When on mobile I want each column to be stacked on each other and the contents reordered with image to the left and the rest on the right. The code below works perfectly as I want on mobile, but on large the image is not stacking with the text.

<row>
  <columns>
      <row>
        <columns small="4" large="12">
          <img src="http://placehold.it/580x300" alt="image 1">
        </columns>
        <columns small="7" large="12" class="small-offset-1">
          <h5 class="text-center small-text-left">This is a title</h5>
          <p class="text-center small-text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
          <p class="text-center small-text-left"><a href="#">Learn more</a></p>
        </columns>
      </row>
  </columns>
  <columns>
      <row>
        <columns small="4" large="12">
          <img src="http://placehold.it/580x300" alt="image 2">
        </columns>
        <columns small="7" large="12" class="small-offset-1">
          <h5 class="text-center small-text-left">This is a title</h5>
          <p class="text-center small-text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
          <p class="text-center small-text-left"><a href="#">Learn more</a></p>
        </columns>
      </row>
  </columns>
  <columns>
      <row>
        <columns small="4" large="12">
          <img src="http://placehold.it/580x300" alt="image 3">
        </columns>
        <columns small="7" large="12" class="small-offset-1">
          <h5 class="text-center small-text-left">This is a title</h5>
          <p class="text-center small-text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
          <p class="text-center small-text-left"><a href="#">Learn more</a></p>
        </columns>
      </row>
  </columns>
</row>

I can solve this problem using .hide-for-large and .show-for-large classes, like this:

<row>
  <columns>
      <row class="hide-for-large">
        <columns small="4" large="12">
          <img src="http://placehold.it/580x300" alt="image 1">
        </columns>
        <columns small="7" large="12" class="small-offset-1">
          <h5 class="text-center small-text-left">This is a title</h5>
          <p class="text-center small-text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
          <p class="text-center small-text-left"><a href="#">Learn more</a></p>
        </columns>
      </row>
      <row>
        <columns small="" large="4" class="show-for-large">
          <img src="http://placehold.it/580x300" alt="image 1">
          <h5 class="text-center small-text-left">This is a title</h5>
          <p class="text-center small-text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
          <p class="text-center small-text-left"><a href="#">Learn more</a></p>
        </columns>
      </row>
  </columns>
  <columns>
      <row class="hide-for-large">
        <columns small="4" large="12">
          <img src="http://placehold.it/580x300" alt="image 2">
        </columns>
        <columns small="7" large="12" class="small-offset-1">
          <h5 class="text-center small-text-left">This is a title</h5>
          <p class="text-center small-text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
          <p class="text-center small-text-left"><a href="#">Learn more</a></p>
        </columns>
      </row>
      <row>
        <columns small="" large="4" class="show-for-large">
          <img src="http://placehold.it/580x300" alt="image 2">
          <h5 class="text-center small-text-left">This is a title</h5>
          <p class="text-center small-text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
          <p class="text-center small-text-left"><a href="#">Learn more</a></p>
        </columns>
      </row>
  </columns>  <columns>
        <row class="hide-for-large">
          <columns small="4" large="12">
            <img src="http://placehold.it/580x300" alt="image 3">
          </columns>
          <columns small="7" large="12" class="small-offset-1">
            <h5 class="text-center small-text-left">This is a title</h5>
            <p class="text-center small-text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
            <p class="text-center small-text-left"><a href="#">Learn more</a></p>
          </columns>
        </row>
        <row>
          <columns small="" large="4" class="show-for-large">
            <img src="http://placehold.it/580x300" alt="image 3">
            <h5 class="text-center small-text-left">This is a title</h5>
            <p class="text-center small-text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
            <p class="text-center small-text-left"><a href="#">Learn more</a></p>
          </columns>
        </row>
    </columns>
</row>

I would prefer to keep the code a little cleaner and hope it is possible to do this without the additional html. Or is this the only possible they at the moment?