Menu icon Foundation
Browser text size/zoom changes row width

Hi,

I understand that Foundation layout is based off the base font size, but is there any way to override this behaviour as affected by setting eg "Firefox->Zoom->Zoom Text Only" or "IE->Text Size->Largest" etc?

eg I have 3 "large-4 columns" and my width is 1000px but when i increase/decrease the text size in the browser menu, the overall width of the site increases/decreases as well, rather than the text just flowing down longer vertically but maintaining the same column widths

for firefox this makes "Zoom Text Only" sort of redundant as with Foundation the layout reacts the same as if I didn't select that.

seems I could set this but I don't know if it's the correct approach:

in my app.scss:

  html { font-size:100%;}

in my _settings.scss:

  $base-font-size:16px;
  $rem-base: $base-font-size;
  $row-width:1000px; 

or i could just use:

$rem-base:16px;
$base-font-size:100%;
$row-width:1000px;

            

         

which appears to do the same thing as setting html {font-size:100%}

it seems to work in this basic instance, but I don't know what knock-on effect it'd have? is there a reason not to do it this way? we ususally distinguish between Text Zoom and Browser Zoom, so our html is usually set at 100%

thanks for any advice
J

Foundationfont sizezoom

Hi,

I understand that Foundation layout is based off the base font size, but is there any way to override this behaviour as affected by setting eg "Firefox->Zoom->Zoom Text Only" or "IE->Text Size->Largest" etc?

eg I have 3 "large-4 columns" and my width is 1000px but when i increase/decrease the text size in the browser menu, the overall width of the site increases/decreases as well, rather than the text just flowing down longer vertically but maintaining the same column widths

for firefox this makes "Zoom Text Only" sort of redundant as with Foundation the layout reacts the same as if I didn't select that.

seems I could set this but I don't know if it's the correct approach:

in my app.scss:

  html { font-size:100%;}

in my _settings.scss:

  $base-font-size:16px;
  $rem-base: $base-font-size;
  $row-width:1000px; 

or i could just use:

$rem-base:16px;
$base-font-size:100%;
$row-width:1000px;

            

         

which appears to do the same thing as setting html {font-size:100%}

it seems to work in this basic instance, but I don't know what knock-on effect it'd have? is there a reason not to do it this way? we ususally distinguish between Text Zoom and Browser Zoom, so our html is usually set at 100%

thanks for any advice
J

Rafi Benkual over 4 years ago

I think that's the best way, to change to the rem-base.