Menu icon Foundation

My Posts

No Content

My Comments

Harmony Steel commented on Toby Stokes's post over 4 years

Hey Rafi, thanks for the feedback, glad it was useful :)!

Harmony Steel commented on Danny's post over 4 years

Hi Danny, I was having the same problem, it's not a Foundation problem but a Safari Mobile problem. Full details here - http://community.sitepoint.com/t/iphone-landscape-view-blows-up-font-sizes/30010

The solution is to include the following in your .scss somewhere:

// Addresses a Mobile Safari issue with text resizing
@media only screen and (min-width : 320px) and (max-width : 560px) {
body {-webkit-text-size-adjust: none;}
}

Hope that helps :)

Harmony Steel commented on Toby Stokes's post over 4 years

Ok I think I found a solution, at least for the way our dev environment is set up, and that was simply running "compass watch" on the "foundation" folder before making my changes.

Here's what worked for me in getting the $medium-breakpoint in _settings.scss to cut out just before iPad landscape (1024 px).

  1. Boot up a command prompt window (Windows start button > type "cmd" and hit enter) then navigate to your "foundation" folder in the command window. e.g. if your website lives in c:\websites\site1 you are going to want your command prompt to look something like:
    C:\websites\site1\foundation

  2. type "compass watch" (without the quotes) and hit enter.

  3. Open up your "scss/_settings.scss" file and navigate to the "d. Media Query Ranges" section which is around line 150.

  4. Uncomment the following lines and change the medium-breakpoint from 1024 to 1023 (or whatever you want for your own purposes), e.g.

    $small-breakpoint: em-calc(640);
    $medium-breakpoint: em-calc(1023);
    $large-breakpoint: em-calc(1440);
    $xlarge-breakpoint: em-calc(1920);

  5. Save the file and take a look at your command prompt, if compass is running correctly it should be printing out something like:
    "modified scss/_settings.scss
    write stylesheet/app.css"

  6. Test on an actual device like an iPad to make sure the new breakpoint is working as expected (don't rely just on browser width as it can sometimes be unreliable).

Anyway hope that can help someone else out.

Harmony Steel commented on Toby Stokes's post over 4 years

I'm having the exact same problem as Brian above, and I've tried all of the solutions listed in this thread.

Technically, if you just use Foundation out of the box, the "large-range" starts at 1024 pixels wide - and this does work on a resized browser screen. But on an actual device, like an iPad in landscape mode, the layout acts like it's in the "medium-range".

Does anyone know of a workaround?

Thank you :)

Posts Followed



Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Toby Stokes's post over 4 years

Hey Rafi, thanks for the feedback, glad it was useful :)!

You commented on Danny's post over 4 years

Hi Danny, I was having the same problem, it's not a Foundation problem but a Safari Mobile problem. Full details here - http://community.sitepoint.com/t/iphone-landscape-view-blows-up-font-sizes/30010

The solution is to include the following in your .scss somewhere:

// Addresses a Mobile Safari issue with text resizing
@media only screen and (min-width : 320px) and (max-width : 560px) {
body {-webkit-text-size-adjust: none;}
}

Hope that helps :)

You commented on Toby Stokes's post over 4 years

Ok I think I found a solution, at least for the way our dev environment is set up, and that was simply running "compass watch" on the "foundation" folder before making my changes.

Here's what worked for me in getting the $medium-breakpoint in _settings.scss to cut out just before iPad landscape (1024 px).

  1. Boot up a command prompt window (Windows start button > type "cmd" and hit enter) then navigate to your "foundation" folder in the command window. e.g. if your website lives in c:\websites\site1 you are going to want your command prompt to look something like:
    C:\websites\site1\foundation

  2. type "compass watch" (without the quotes) and hit enter.

  3. Open up your "scss/_settings.scss" file and navigate to the "d. Media Query Ranges" section which is around line 150.

  4. Uncomment the following lines and change the medium-breakpoint from 1024 to 1023 (or whatever you want for your own purposes), e.g.

    $small-breakpoint: em-calc(640);
    $medium-breakpoint: em-calc(1023);
    $large-breakpoint: em-calc(1440);
    $xlarge-breakpoint: em-calc(1920);

  5. Save the file and take a look at your command prompt, if compass is running correctly it should be printing out something like:
    "modified scss/_settings.scss
    write stylesheet/app.css"

  6. Test on an actual device like an iPad to make sure the new breakpoint is working as expected (don't rely just on browser width as it can sometimes be unreliable).

Anyway hope that can help someone else out.

You commented on Toby Stokes's post over 4 years

I'm having the exact same problem as Brian above, and I've tried all of the solutions listed in this thread.

Technically, if you just use Foundation out of the box, the "large-range" starts at 1024 pixels wide - and this does work on a resized browser screen. But on an actual device, like an iPad in landscape mode, the layout acts like it's in the "medium-range".

Does anyone know of a workaround?

Thank you :)

Posts Followed

Following

  • No Content

Followers

  • No Content