Menu icon Foundation
Issues with Center Tag

Hey Guys, I've been using foundation for Emails 2 for awhile and for the most part, I've gotten really good and trouble shooting issues I've run across in addition to helping others solve problems there having. 

Alas, I've run into something that I just can't figure out. In the following code my layout is breaking. I've isolated the issue to the <center> tag and potentially how I am using the <wrapper> tag.  I know that others have had issues with the center tag and I'm curious if I'm just using it incorrectly. 

This is my code: (simple two column format).  Note, that I added a wrapper because I am including a background color behind two images. I'm including the <center> so I can center my buttons.  Easy right? Go ahead and run this code in your own working example and see if it screws up your layout.  

<container>
<!-- Hero Image -->
<row>
    <columns small="12" large="12" title="20 Percent Off All NIKE">
        <a href="http://google.com">
            <img src="http://assets.cat5.com/newsletter/tacticalgear/2016/061316-a/061316-main-01.jpg" width="580" height="700" alt="20 Percent Off All NIKE">
        </a> 
    </columns>
</row>
<!-- / Hero Image -->

<!-- 1 columns CTA -->
<row>
    <columns>
        <a href="http://google.com" title="" target="_blank">
            <img src="http://placehold.it/580x300" width="580" height="300" alt="">
        </a>
    </columns>
</row>
<!-- / 1 columns CTA -->

<!-- 2 columns CTA / non collapsable / no gutter -->
<row class="collapse">
    <columns>
        <wrapper class="product-listing" >
            <row class="no-padding-b">
                <columns small="6" large="6">
                    <a href="http://google.com" title="" target="_blank">
                        <img class="small-float-center" src="http://placehold.it/580x600" width="290" height="300" alt="">
                    </a>
                    <p class="text-center">
                        <span class="name text-center">
                            Name of Product
                        </span>
                    </p>

                    <p class="pre-price text-center" style="text-decoration:line-through;">
                        $9.99
                    </p>
                    <p class="price text-center">
                        $25.99
                    </p>
                    
                    <center><button src="http://tacticalgear.com" class="small">button</button></center>
                    
                </columns>
                <columns small="6" large="6">
                    <a href="http://google.com" title="" target="_blank">
                        <img class="small-float-center" src="http://placehold.it/580x600" width="290" height="300" alt="">
                    </a>
                    <p class="text-center">
                        <span class="name text-center">
                            Name of Product
                        </span>
                    </p>

                    <p class="pre-price text-center" style="text-decoration:line-through;">
                        $9.99
                    </p>
                    <p class="price text-center">
                        $25.99
                    </p>
                    
                    <center><button src="http://google.com" class="small">button</button></center>
                    
                </columns>
            </row>
        </wrapper>
    </columns>
</row>
<!-- /2 columns CTA / non collapsable / no gutter -->
<!-- Main Description -->
<row>
    <columns small="12" large="12">
        <wrapper class="summary-content-block" bgcolor="#ebebeb">
            <h4 class="sub small-text-center"><b>Before NIKE founder Bill Bowerman was a track coach ...</b></h4>

            
            <p>... he was a member of the legendary 10th Mountain Division in Italy. NIKE tactical gear is a combination of Bowerman's two passions, track and the military. Each style of apparel, equipment and footwear combines combat-ready aggressiveness with high-mobility athletic designs. When it comes to making updates, NIKE doesn't shy away from feedback. In fact, the brand works directly with its customers to incorporate changes into upgraded models.
            </p>
            <p>
                Now's the time to stock up on these intelligently engineered products. For a limited time, our whole selection of NIKE footwear, clothing and equipment is 25% off. Offer ends 6/18.
            </p>

        </wrapper>
    </columns>
</row>
<!-- / main description--> 


<!-- Buttons -->
<row>
    <columns small="12" large="6">
        <button href="http://google.com" class="expand"><b>Shop Button 1</b></button>
    </columns>
    <columns small="12" large="6">
        <button href="http://google.com" class="expand"><b>Shop Button 2</b></button>
    </columns>
</row>
<!-- / buttons-->



<!-- Offer Details
** If offer details are not needed, just delete it. **
-->
<row class="footer-text-container">
    <columns small="12" large="12">
        <row>
            <columns small="12" large="12" class="footer-text">
                <p class="small-text-center">
                    <b>Offer details</b><br>
                    There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage.
                </p>
            </columns>
        </row>
    </columns>
</row>
<!-- Offer Details -->

</container>

Center TagFoundation for Emailwrapper tag

Hey Guys, I've been using foundation for Emails 2 for awhile and for the most part, I've gotten really good and trouble shooting issues I've run across in addition to helping others solve problems there having. 

Alas, I've run into something that I just can't figure out. In the following code my layout is breaking. I've isolated the issue to the <center> tag and potentially how I am using the <wrapper> tag.  I know that others have had issues with the center tag and I'm curious if I'm just using it incorrectly. 

This is my code: (simple two column format).  Note, that I added a wrapper because I am including a background color behind two images. I'm including the <center> so I can center my buttons.  Easy right? Go ahead and run this code in your own working example and see if it screws up your layout.  

<container>
<!-- Hero Image -->
<row>
    <columns small="12" large="12" title="20 Percent Off All NIKE">
        <a href="http://google.com">
            <img src="http://assets.cat5.com/newsletter/tacticalgear/2016/061316-a/061316-main-01.jpg" width="580" height="700" alt="20 Percent Off All NIKE">
        </a> 
    </columns>
</row>
<!-- / Hero Image -->

<!-- 1 columns CTA -->
<row>
    <columns>
        <a href="http://google.com" title="" target="_blank">
            <img src="http://placehold.it/580x300" width="580" height="300" alt="">
        </a>
    </columns>
</row>
<!-- / 1 columns CTA -->

<!-- 2 columns CTA / non collapsable / no gutter -->
<row class="collapse">
    <columns>
        <wrapper class="product-listing" >
            <row class="no-padding-b">
                <columns small="6" large="6">
                    <a href="http://google.com" title="" target="_blank">
                        <img class="small-float-center" src="http://placehold.it/580x600" width="290" height="300" alt="">
                    </a>
                    <p class="text-center">
                        <span class="name text-center">
                            Name of Product
                        </span>
                    </p>

                    <p class="pre-price text-center" style="text-decoration:line-through;">
                        $9.99
                    </p>
                    <p class="price text-center">
                        $25.99
                    </p>
                    
                    <center><button src="http://tacticalgear.com" class="small">button</button></center>
                    
                </columns>
                <columns small="6" large="6">
                    <a href="http://google.com" title="" target="_blank">
                        <img class="small-float-center" src="http://placehold.it/580x600" width="290" height="300" alt="">
                    </a>
                    <p class="text-center">
                        <span class="name text-center">
                            Name of Product
                        </span>
                    </p>

                    <p class="pre-price text-center" style="text-decoration:line-through;">
                        $9.99
                    </p>
                    <p class="price text-center">
                        $25.99
                    </p>
                    
                    <center><button src="http://google.com" class="small">button</button></center>
                    
                </columns>
            </row>
        </wrapper>
    </columns>
</row>
<!-- /2 columns CTA / non collapsable / no gutter -->
<!-- Main Description -->
<row>
    <columns small="12" large="12">
        <wrapper class="summary-content-block" bgcolor="#ebebeb">
            <h4 class="sub small-text-center"><b>Before NIKE founder Bill Bowerman was a track coach ...</b></h4>

            
            <p>... he was a member of the legendary 10th Mountain Division in Italy. NIKE tactical gear is a combination of Bowerman's two passions, track and the military. Each style of apparel, equipment and footwear combines combat-ready aggressiveness with high-mobility athletic designs. When it comes to making updates, NIKE doesn't shy away from feedback. In fact, the brand works directly with its customers to incorporate changes into upgraded models.
            </p>
            <p>
                Now's the time to stock up on these intelligently engineered products. For a limited time, our whole selection of NIKE footwear, clothing and equipment is 25% off. Offer ends 6/18.
            </p>

        </wrapper>
    </columns>
</row>
<!-- / main description--> 


<!-- Buttons -->
<row>
    <columns small="12" large="6">
        <button href="http://google.com" class="expand"><b>Shop Button 1</b></button>
    </columns>
    <columns small="12" large="6">
        <button href="http://google.com" class="expand"><b>Shop Button 2</b></button>
    </columns>
</row>
<!-- / buttons-->



<!-- Offer Details
** If offer details are not needed, just delete it. **
-->
<row class="footer-text-container">
    <columns small="12" large="12">
        <row>
            <columns small="12" large="12" class="footer-text">
                <p class="small-text-center">
                    <b>Offer details</b><br>
                    There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage.
                </p>
            </columns>
        </row>
    </columns>
</row>
<!-- Offer Details -->

</container>

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

Rafi Benkual over 3 years ago

Hey Corey,

You've been awesome at helping people!

Found a couple things:

- Noticed the buttons have `scr=` instead of `href`. Since it's a link, it will need the href to render properly.

- It is correct that the layout issue stems from the center tag. It has a calculated min-width, which when removed in the inspector fixes it.

 

You can see the width is set in the _grid.scss file line 126. There is another width in the normalize file as well. Removing both of these resolves it on the web.

I didn't see any connection though to the wrapper component.

I'm also curious to see how it works on all email clients without the width on the center tag.

Rafi Benkual over 3 years ago

Digging in more, the min-width is necessary to center images in Outlook 2000, 2002, 2003. Removing it seems to not affect the buttons though. You may be able to override this in CSS for now. Still odd - not sure what combination of things makes this happens since it hasn't been an issue before.

 

Rafi Benkual over 3 years ago

Ok, narrowed it down to the nested columns. If you remove the column nesting the layout is fine.

Corey Schaaf over 3 years ago

Rafi, Thanks for looking into this. Just so I understand you correctly. You're saying the only way to use the <center> tag is on the first level of columns without any nesting? 

So I could use it like so:

<container>
  <row>
    <wrapper>
        <columns>    
          <center><button href="http://foundation.zurb.com"></button></center>    
        </columns>
        <columns>      
          <center><button href="http://foundation.zurb.com"></button></center>      
        </columns>
    </wrapper>
  </row>
</container>  

However, this would NOT work? 

<container>
  <row>
    <columns>
      <wrapper>
        <row>
          <columns small="12" large="6">
             <center><button href="http://foundation.zurb.com"></button></center>
          </columns>
          <columns small="12" large="6">
             <center><button href="http://foundation.zurb.com"></button></center>
          </columns>
        </row>
      </wrapper>
    </columns>
  </row>
</container>  

 thanks for the help on the src vs href on the button. Totally missed that. 

Rafi Benkual over 3 years ago

Well, I'm not saying it should work that way but it seems like the width of the center element is causing an issue on nested grids. I'm sure there is a way to account for it in the SCSS somehow.

If you remove the nesting it works fine.

 

Rafi Benkual over 3 years ago

Ok, I added the test to the foundation-emails repo and added a fix for nested grids as well as the center tag. You can fetch and checkout this branch https://github.com/zurb/foundation-emails/commit/d75a1120a55cd87cb09959a117dcf8824b855ddd

And let us know how it works for you! We'd like to get the fix in for 2.2 if you confirm it's good.

Jarryd Fillmore over 3 years ago

Thanks for this Rafi!

Corey Schaaf over 3 years ago

Thanks rafi. Ill check this out on monday. 

Corey Schaaf over 3 years ago

@rafi - this appears to be working for me! Thanks again! 

Rafi Benkual over 3 years ago

Sweet - merging the PR in!