Menu icon Foundation

My Posts


My Comments

Jesper commented on Jesper's post about 1 year

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

Jesper commented on Jesper's post over 1 year

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);
}
 
 

Jesper commented on Rich Bothe's post over 1 year

I can confirm - Spacer does not work in Outlook. I'm wondering why it hasn't been fixed for so long?

Posts Followed

  • 6
    Replies
  • Outlook 2010 Spacer Issue

    By Rich Bothe

    Outlookspacer

    In the screenshot, I have <spacer size="10"></spacer> in the bottom of the section with gray background, and <spacer size="20"></spacer> in top of black section with <spacer size="10"></spacer> is bottom of black s... (continued)

    Last Reply by Jesper over 1 year ago


Following

    No Content

Followers

My Posts


My Comments

You commented on Jesper's post about 1 year

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

You commented on Jesper's post over 1 year

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);
}
 
 

You commented on Rich Bothe's post over 1 year

I can confirm - Spacer does not work in Outlook. I'm wondering why it hasn't been fixed for so long?

Posts Followed


Following

  • No Content

Followers

  • No Content