Menu icon Foundation
Using <center /> affects email's width

Consider the following structure:

    <container class="content">
        <wrapper className="content__wrapper">
            <center>
                <img src="image.png" />
            </center>
        </wrapper>
    </container>

And the SCSS:

.content__wrapper .wrapper-inner {
    padding: 30px;
}

At the top level I have container so the $global-width is applied there. Inside the container I have wrapper and in CSS I'm applying a padding. Inside the wrapper I'd like to have centered image and here comes the problem. If I use <center /> the whole container no longer has $global-width but $global-width + 2 * 30px because <center /> has min-width: $global-width set and does not take my padding into account.

Am I doing something wrong or is it by design? How to user <center /> without affecting container width?

centerwidthpadding

Consider the following structure:

    <container class="content">
        <wrapper className="content__wrapper">
            <center>
                <img src="image.png" />
            </center>
        </wrapper>
    </container>

And the SCSS:

.content__wrapper .wrapper-inner {
    padding: 30px;
}

At the top level I have container so the $global-width is applied there. Inside the container I have wrapper and in CSS I'm applying a padding. Inside the wrapper I'd like to have centered image and here comes the problem. If I use <center /> the whole container no longer has $global-width but $global-width + 2 * 30px because <center /> has min-width: $global-width set and does not take my padding into account.

Am I doing something wrong or is it by design? How to user <center /> without affecting container width?

Grégoire Gonzalez de Linares over 1 year ago

Hello,

 

I have approximately the same problem..

 

I'm wondering why there is in the CSS:

 

th.large-12 center {

  min-width: 532px;

}

 

th.large-4 center {

  min-width: 145.3333px;

 

That is purely destroying my mail architecture...

 

The section is made of:

row

  large-12 column

    row

      large-4 column

        center

          img

 

(I removed all the tables, tbody, tr, th and td for the example and I'm not using the inky version)

 

Can someone explain me why there are those CSS instructions?

 

Thank you

Jesper over 1 year ago

I've ended up override default foundation styling for center tag:

 

center {
  min-width: $global-width - 2 * $inner-border-width - 2 * $inner-padding-horz;
}

 

where $inner-border-width and $inner-padding-horz are my custom variables.

 

Grégoire Gonzalez de Linares, your case is more complicated as you put center tag inside rows with large-x classes. Foundation defines styles for that as follows:

  td.large-#{$i} center,
  th.large-#{$i} center {
    min-width: -zf-grid-calc-px($i, $grid-column-count, $global-width) - ($global-gutter * 2);
  }

and -zf-grid-calc-px is a function:

/// Calculates a pixel value for a grid column width.
/// @access private
/// @param {number} $columnNumber - Column count of the column.
/// @param {number} $totalColumns - Column count of the entire row.
/// @param {number} $containerWidth - Width of the surrounding container, in pixels.
/// @returns {number} A pixel width value.
@function -zf-grid-calc-px($columnNumber, $totalColumns, $containerWidth) {
  @return ($containerWidth / $totalColumns * $columnNumber - $global-gutter);
}

 

 

Grégoire Gonzalez de Linares over 1 year ago

Thank you for your answer jesper!

 

Well I knew how the width were computed but I don't understand why it needs to have  a min width..

 

I have overwrite it with min width 0 and it works pretty well on most of the email clients!

 

Grégoire

 

Ps: I'm french so excuse me if I made English mistakes!

 

Jesper over 1 year ago

Up!

 

Does anyone knows why center tag has min-width set? Any case when removing it causes any issues?