Menu icon Foundation
Solved/Updated: Images won't Center on Iphone Devices When Using an Anchor Tag

Below is the code I'm using to try and create a clickable gallery. While this works great for the Majority of Desktop views, it gets destroyed on Small views for Mobile devices. My test results from Email On Acid can be found here

Email On Acid URL 

<!-- Gallery -->
  <row class="gallery">
    <columns small="12" large="4">
        <h4 class="text-center">furry friends</h4>
    </columns>
  </row> 

  <row class="gallery">
    <columns small="4" large="4">
      <a href="http://tacticalgear.com" class="text-center"><center><img src="http://placehold.it/120" alt="image of cute kitty"></center></a>
      <p class="gallery-name">name</p>
      <p class="gallery-info">age</p>
    </columns>

    <columns small="4" large="4">
      <a href="http://tacticalgear.com" class="text-center"><center><img src="http://placehold.it/120" alt="image of cute kitty"></center></a>
      <p class="gallery-name">name</p>
      <p class="gallery-info">age</p>
    </columns>

    <columns small="4" large="4">
      <a href="http://tacticalgear.com" class="text-center"><center><img src="http://placehold.it/120" alt="image of cute kitty"></center></a>
      <p class="gallery-name">name</p>
      <p class="gallery-info">age</p>
    </columns>
  </row>

A screenshot below using the code above: Please note I'm using the <center> around the image. Also, I've tried wrapping center around the anchor as well but still had problems. 

 

example of gallery on mobile 

 

 

An alternative method that is not reliable: 

 I can center an image just fine using an alternative method if the Image sits in a 12 column format: 

  <!-- product callout -->
  <row>
    <columns small="12" large="3" class="large-offset-1">
      <a href="http://tacticalgear.com"><img class="small-float-center" src="http://placehold.it/120" alt="Image of question mark"></a>
    </columns>
    <columns small="12" large="7">
      <p class="small-text-center"><a href="http://tacticalgear.com" class="small-text-center">Title of Product Goes Here Title of Product Goes HereTitle of Product Goes HereTitle of Product Goes HereTitle of Product Goes Here</a></p>
      <button href="http://tacticalgear.com" class="small-float-center">Review your Purchase</button>
    </columns>
    <columns small="12" large="1"></columns>
  </row>
  <!-- /product callout -->

  <!-- product callout -->
  <row>
    <columns small="12" large="3" class="large-offset-1">
      <a href="http://tacticalgear.com"><img class="small-float-center" src="http://placehold.it/120" alt="Image of question mark"></a>
    </columns>
    <columns small="12" large="7">
      <p class="small-text-center"><a href="http://tacticalgear.com" class="small-text-center">Title of Product Goes Here Title of Product Goes HereTitle of Product Goes HereTitle of Product Goes HereTitle of Product Goes Here</a></p>
      <button href="http://tacticalgear.com" class="small-float-center">Review your Purchase</button>
    </columns>
    <columns small="12" large="1"></columns>
  </row>
  <!-- /product callout -->

 

 The image below is an example of the code above using the "small-float-center" directly on the image instead of surrounding the image with a center tag. However this method doesn't work on the gallery (the first screenshot above) because I'm assuming it's not a single column of 12. 


This is an example of an image using the entire 12 colunns with a class on the image of "float-center" on the image.

 

 

emailscenteringImages. centering images with anchor tag

Below is the code I'm using to try and create a clickable gallery. While this works great for the Majority of Desktop views, it gets destroyed on Small views for Mobile devices. My test results from Email On Acid can be found here

Email On Acid URL 

<!-- Gallery -->
  <row class="gallery">
    <columns small="12" large="4">
        <h4 class="text-center">furry friends</h4>
    </columns>
  </row> 

  <row class="gallery">
    <columns small="4" large="4">
      <a href="http://tacticalgear.com" class="text-center"><center><img src="http://placehold.it/120" alt="image of cute kitty"></center></a>
      <p class="gallery-name">name</p>
      <p class="gallery-info">age</p>
    </columns>

    <columns small="4" large="4">
      <a href="http://tacticalgear.com" class="text-center"><center><img src="http://placehold.it/120" alt="image of cute kitty"></center></a>
      <p class="gallery-name">name</p>
      <p class="gallery-info">age</p>
    </columns>

    <columns small="4" large="4">
      <a href="http://tacticalgear.com" class="text-center"><center><img src="http://placehold.it/120" alt="image of cute kitty"></center></a>
      <p class="gallery-name">name</p>
      <p class="gallery-info">age</p>
    </columns>
  </row>

A screenshot below using the code above: Please note I'm using the <center> around the image. Also, I've tried wrapping center around the anchor as well but still had problems. 

 

example of gallery on mobile 

 

 

An alternative method that is not reliable: 

 I can center an image just fine using an alternative method if the Image sits in a 12 column format: 

  <!-- product callout -->
  <row>
    <columns small="12" large="3" class="large-offset-1">
      <a href="http://tacticalgear.com"><img class="small-float-center" src="http://placehold.it/120" alt="Image of question mark"></a>
    </columns>
    <columns small="12" large="7">
      <p class="small-text-center"><a href="http://tacticalgear.com" class="small-text-center">Title of Product Goes Here Title of Product Goes HereTitle of Product Goes HereTitle of Product Goes HereTitle of Product Goes Here</a></p>
      <button href="http://tacticalgear.com" class="small-float-center">Review your Purchase</button>
    </columns>
    <columns small="12" large="1"></columns>
  </row>
  <!-- /product callout -->

  <!-- product callout -->
  <row>
    <columns small="12" large="3" class="large-offset-1">
      <a href="http://tacticalgear.com"><img class="small-float-center" src="http://placehold.it/120" alt="Image of question mark"></a>
    </columns>
    <columns small="12" large="7">
      <p class="small-text-center"><a href="http://tacticalgear.com" class="small-text-center">Title of Product Goes Here Title of Product Goes HereTitle of Product Goes HereTitle of Product Goes HereTitle of Product Goes Here</a></p>
      <button href="http://tacticalgear.com" class="small-float-center">Review your Purchase</button>
    </columns>
    <columns small="12" large="1"></columns>
  </row>
  <!-- /product callout -->

 

 The image below is an example of the code above using the "small-float-center" directly on the image instead of surrounding the image with a center tag. However this method doesn't work on the gallery (the first screenshot above) because I'm assuming it's not a single column of 12. 


This is an example of an image using the entire 12 colunns with a class on the image of "float-center" on the image.

 

 

This post has been closed. No new replies can be added.

Corey Schaaf over 3 years ago

I've figured out a solution to the problem above and I believe it's an over arching problem with the foundation for emails code.  I'll try to go as in depth as I can and explain how I was able to fix this issue.

In the image below you'll notice that thumbnails aren't taking up 100% of space like they are suppose to .. Rather, they are taking up 33% of the space in the column.  

 

This is the code I'm using (for the example above) which is an excerpt from the Foundations Master Class. The only difference is I've added anchors to my images. 

<!-- Gallery -->
  <row class="gallery">
    <columns small="12" large="4">
        <h4 class="text-center">furry friends</h4>
    </columns>
  </row> 

  <row class="gallery">
    <columns small="4" large="4">
      <a href="http://tacticalgear.com" class="text-center"><center><img src="http://placehold.it/120" alt="image of cute kitty"></center></a>
      <p class="gallery-name">name</p>
      <p class="gallery-info">age</p>
    </columns>

    <columns small="4" large="4">
      <a href="http://tacticalgear.com" class="text-center"><center><img src="http://placehold.it/120" alt="image of cute kitty"></center></a>
      <p class="gallery-name">name</p>
      <p class="gallery-info">age</p>
    </columns>

    <columns small="4" large="4">
      <a href="http://tacticalgear.com" class="text-center"><center><img src="http://placehold.it/120" alt="image of cute kitty"></center></a>
      <p class="gallery-name">name</p>
      <p class="gallery-info">age</p>
    </columns>
  </row>

 

I started by trying to figure out what was overiding the image width. As it turns out, the image is 100% of the column. Which is what it's suppose to be. However, the center tag was showing 33.333%. Notice the media query being invoked in the screenshot below. (th.small-4 center). I'm pretty sure this media query isn't suppose to include center. This would explain why the image was only 333.333% of it's container. Note that this issue was only happening on small devices where an image was sitting in a column.  Im my case, I'm using a three column format, but if I was using a 2 column format or a 4 column format, this exact same issue would still happen.  

In my example, the 33.333% makes sense for actual column width, but the center tag should still be 100%. 

Please note, that this problem will most likely NOT HAPPEN on a 12 column format. The reason is because a 12 column format is 100% as opposed to my 3 column format that is 33.333%. So based on the structure of the media query, the center tag will be 100% on a 12 column format. 

 

 

 

So now that I know what the problem is. How did I fix it? 

It's a fairly straight forward but took several hours of testing to verify. For my example, I needed ot override this media query:th.small-4 center. (note you might have to override th.small-3 center if you're using a 4 column format or th.small-6 center if you're using a 2 column format) 

I started by adding a class to the center tag. I called mine galleries. 

<a href="http://tacticalgear.com" class="text-center"><center class="galleries"><img src="http://placehold.it/120" alt="image of cute kitty"></center></a>

After that, I added the following to my scss:

@media only screen and (max-width: 580px) {
	td, th{
		&.small-4{
			center{
				&.galleries{
					width:100%!important;
				}
			}
		}
	}
}

If you're using css, it looks like the following: 

@media only screen and (max-width: 580px) {
  td.small-4 center.galleries, th.small-4 center.galleries {
    width: 100% !important; } }

Once I did that, my issues were solved and my images were centered. You can see the results of my test on EmailOnAcid by clicking the link below. 

https://www.emailonacid.com/app/acidtest/display/summary/SMpHDw9BG1z4e75KiHRRBdDOEBP0ljwT4XKDmQ1hXG5jN/shared