CODEWITHSUNDEEP
htmlcsszurb-foundation
StandardNerd
StandardNerd

Reputation: 4183

Foundation 6: how to handle images that has an vertical overflow within one row?

I use Zurb's Foundation 6 to implement a print layout that involves an image, that stick out of its row (see image within red border). The first image is within one row (class="row lp-1") the other two images are inside the following row (class="row lp-2").

image1

The issue is, that when i change my viewport the second image in the same row move vertically a little bit so that there bottom is not on the same horizontal line see the the misalignment marked in the blue border.

enter image description here

My HTML:

    <div class="row lp-1">
      <div class="large-12 column">
        <%= image_tag("landing_page_1", alt: "landing page 1") %>

      </div>

    </div>

    <div class="row lp-2">
      <div class="large-1 column"></div>
      <div class="large-4 column offset-12y">
        <%= image_tag("landing_page_2", alt: "landing page 1") %>
        <p class="article-header">
          Denim & Embroidery
        </p>
        <p class="article-text">
          shop now
        </p>
        <hr class="article"/>
      </div>
      <div class="large-6 column offset4y">
        <%= image_tag("landing_page_3", alt: "landing page 1") %>
        <p class="article-header">
          Men Shirt Print
        </p>
        <p class="article-text">
          shop now
        </p>
        <hr class="article"/>
      </div>
      <div class="large-1 column"></div>
    </div>

And my CSS:

.lp-2 {
  margin-top: -8rem;
  img { margin-top: 3.9rem; }
}
.offset4y {margin-top: 4rem;}
.offset-10y { margin-top: -10rem; }

How can i solve this?

Upvotes: 1

Views: 68

Answers (1)

StandardNerd
StandardNerd

Reputation: 4183

I could solve this with the new Flexbox Attribute:

CSS:

// Flexbox vertical alignment to bottom
.va-bottom { align-self: flex-end; }

HTML:

      <div class="large-6 column va-bottom">
        <%= image_tag("landing_page_3", alt: "landing page 1") %>
        <p class="article-header">
          Men Shirt Print
        </p>
        <p class="article-text">
          shop now
        </p>
        <hr class="article"/>
      </div>

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Upvotes: 1

Related Questions