Menu icon Foundation
Center button inside callout

Hi I'm using this callout but when I <center> the button it pushes the container that other images don't work on collapse

<callout class="secondary">

    <row>
        <columns>

            <h3 class="text-center">Heading</h3>

            <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non esse molestiae eos voluptatum facere modi similique blanditiis ducimus.</p>

                <center>
                  <button href="#" class="radius">Button</button>
                </center>

        </columns>
    </row>

</callout>

 

image problem

centerbuttonCallout

Hi I'm using this callout but when I <center> the button it pushes the container that other images don't work on collapse

<callout class="secondary">

    <row>
        <columns>

            <h3 class="text-center">Heading</h3>

            <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non esse molestiae eos voluptatum facere modi similique blanditiis ducimus.</p>

                <center>
                  <button href="#" class="radius">Button</button>
                </center>

        </columns>
    </row>

</callout>

 

image problem

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

Corey Schaaf over 3 years ago

I believe there is a fix in the 2.2 release of Foundation for Emails that was released yesterday evening that should address this issue. 

What version of Foundation for Emails are you using? 

Also, why not put the callout inside the column instead of on the outside of the row? 

That might actually be causing the problem as well.

Luke over 3 years ago

Ok thanks for your help Corey

When i check version im getting this in terminal

If I run update it says im all good?

Also putting the callout inside the row didn't work

Corey Schaaf over 3 years ago

the Foundation CLI version is 2.1.0

The new Foundation Framework is 2.2.1. 

Luke over 3 years ago

This is whats happening when i try to update foundation

 

CPE-121-208-144-212:project Luke$ foundation update
(node:2200) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.

Nothing to update. You're good!

Luke over 3 years ago

I could not  get the emails to update to 2.2.1 so I installed new project and updated manually and everything seems ok but it didn't fix the problem I had with the centered button in the callout pushing my container out.

 

I did see this post with you having the same problem updating http://foundation.zurb.com/forum/posts/44856-updating-foundation-for-emails-221#

Jarryd Fillmore over 3 years ago

Interesting.

Luke over 3 years ago

ok I worked out what the problem was,. After grabbing my own hand and slapping myself with it I worked out my row need the collapse class.

 

This is what I was trying to achieve

but wrapping the button with <center> was pushing the container out. Added the collapse to my row and all good.

This is what i ended with

<callout class="secondary">
    <row class="collapse">
        <columns>

            <h3 class="text-center">This is a header message alt</h3>

            <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non esse molestiae eos voluptatum facere modi similique blanditiis ducimus.</p>

            <center>
                <button href="#" class="radius">Message Button</button>
            </center>

        </columns>
    </row>
</callout>

 

Thanks for all your help Corey appreciate it mate!!

 

 

 

 

 

Rafi Benkual about 3 years ago

Nice! Glad you got it! 

Great help as well @corey