Menu icon Foundation
valign not working in mobile

valign is working for the large viewport but when I collapse the browser window it breaks. Does anyone have any ideas?

Here is my code:

      <columns small="6" large="6" valign="middle">
        <p class="text-right" style="margin-bottom:0px;"><a href="#" style="font-size:12px;">www.google.co.uk</a></p>
      </columns>

Thanks!

valignemailbreak-point

valign is working for the large viewport but when I collapse the browser window it breaks. Does anyone have any ideas?

Here is my code:

      <columns small="6" large="6" valign="middle">
        <p class="text-right" style="margin-bottom:0px;"><a href="#" style="font-size:12px;">www.google.co.uk</a></p>
      </columns>

Thanks!

Corey Schaaf over 3 years ago

I'm not experiencing the same problem as you.  It would help if you could post all of your inky markup and not just the single column. I'm assuming you want to vertically center something based on another column, but you're markup is only showing one column. 

 

 

Jarryd Fillmore over 3 years ago

Getting the same issue.

Rafi Benkual over 3 years ago

Are you seeing this in a actual device?

This test case seems to work:

<row>
  <columns small="3" large="3" valign="top">
    <img class="float-right" src="http://placehold.it/50" alt="">
  </columns>
  <columns small="3" large="3" valign="bottom">
    <h4>Bottom</h4>
  </columns>
  <columns small="3" large="3" valign="middle">
    <h4 style="margin-bottom: 0;" class="text-right">HEADLINE</h4>
    <p style="margin-bottom: 0;" class="text-right subheader">SUBHEADLINE</p>
  </columns>
  <columns small="3" large="3" valign="middle">
    <img class="small-float-center" src="http://placehold.it/250" alt="">
  </columns> 
</row>

 

Rafi Benkual over 3 years ago

Also, make sure you are on version 2.2.1

Jack Hobbs over 3 years ago

Hey guys,

 

Still can't get this to work, here's my Inky:

  <!--Start Header-->
    <spacer size="16"></spacer>
    <row>
      <columns small="6" large="6">
        <img class="float-left" src="http://placehold.it/70x25" alt="Logo">
      </columns>
      <columns small="6" large="6" valign="middle">
        <p style="margin-bottom:0px;" class="text-right"><a href="#" style="font-size:12px;">www.link.com</a></p>
      </columns>
    </row>
  <!--End Header-->

 

Here is a GIF of it:

https://gfycat.com/BleakIdioticDingo

 

I am also on 2.21

 

Any thoughts?

Corey Schaaf over 3 years ago

I can't replicate this issue.  I keep a two column format on mobile and valign="middle" still works for me.  Can you try removing all your custom classes to see if that's causing the issue.  

Also, verify that you are in fact on 2.2.1. Just because your package.json file is updated to 2.2.1 doesn't mean you actually are.  Once you verify that you are on 2.2.1 and that you're inky version is 1.3.6 - run the command npm update in the root of your project folder. Once that's finished run the foundation build command again.  

Hopefully the result will be a vertically aligned rendering (assuming the other classes on the img aren't causing the problem. 

Jack Hobbs over 3 years ago

@corey, followed all your steps to ensure that I am on 2.2.1 and I still have the issue. 

When I use valign="bottom" I don't have the same issue. Have you any more ideas what it could be?

Thanks