Menu icon Foundation
Strange behaviour changing font sizes

Hi,

I've come across what appears to be strange behaviour when changing font-sizes depending on the current breakpoint.

The following code sets the the font-sizes for labels depending on device orientation. I want a larger font size in landscape compared to portrait on small screen sizes.

label {
    @include breakpoint(small only) {
      @include breakpoint(portrait) {
        font-size: 0.6rem;
      }
      @include breakpoint(landscape) {
        font-size: 0.7rem;
        background-color: white;
      }
    }
  }
            

         

The above code produces the following layout on an iPhone 5, I've added a white background to the labels so I could see how much space they were taking up on the page:

Img 2142

When I change the font size to 0.8rem for landscape as so:

  label {
    @include breakpoint(small only) {
      @include breakpoint(portrait) {
        font-size: 0.6rem;
      }
      @include breakpoint(landscape) {
        font-size: 0.8rem;
        background-color: white;
      }
    }
  }
            

        

Then I get the following layout in Landscape:

Img 2140

The only difference between the two layouts is the font size increasing from 0.7rem to 0.8rem.

Please could someone help me understand what is going on here, and why the layout gets messed up by increasing the font-size by 0.1rem.

The only change I have made to the _settings.js file is to add xlarge and xxlarge to the $breakpoint-classes because I want different layouts on iPad mini retina (large) compared to my MBP (xxlarge) etc.

Many thanks

Paul

breakpoints small-only

Hi,

I've come across what appears to be strange behaviour when changing font-sizes depending on the current breakpoint.

The following code sets the the font-sizes for labels depending on device orientation. I want a larger font size in landscape compared to portrait on small screen sizes.

label {
    @include breakpoint(small only) {
      @include breakpoint(portrait) {
        font-size: 0.6rem;
      }
      @include breakpoint(landscape) {
        font-size: 0.7rem;
        background-color: white;
      }
    }
  }
            

         

The above code produces the following layout on an iPhone 5, I've added a white background to the labels so I could see how much space they were taking up on the page:

Img 2142

When I change the font size to 0.8rem for landscape as so:

  label {
    @include breakpoint(small only) {
      @include breakpoint(portrait) {
        font-size: 0.6rem;
      }
      @include breakpoint(landscape) {
        font-size: 0.8rem;
        background-color: white;
      }
    }
  }
            

        

Then I get the following layout in Landscape:

Img 2140

The only difference between the two layouts is the font size increasing from 0.7rem to 0.8rem.

Please could someone help me understand what is going on here, and why the layout gets messed up by increasing the font-size by 0.1rem.

The only change I have made to the _settings.js file is to add xlarge and xxlarge to the $breakpoint-classes because I want different layouts on iPad mini retina (large) compared to my MBP (xxlarge) etc.

Many thanks

Paul

Paul Hollyer over 3 years ago

I just tried to edit my post to add the generated HTML, and when I click on Publish, I get an error saying a title, question and tag are required :(

Anyway, here's the html:

<section data-ng-hide="data.selectedOption.id == 0">
    <hr>
    <div class="subheader">Your contact information</div>
    <div class="row">
        <div class="small-2 columns">
            <label for="full-name" class="middle">Name</label>
        </div>
        <div class="small-10 medium-4 columns">
            <input id="full-name" type="text" placeholder="Forename Surname" data-ng-model="fullName">
        </div>
        <div class="small-2 medium-2 columns">
            <label for="age" class="text-right-for-medium middle">Age</label>
        </div>
        <div class="small-4 medium-2 large-1 columns end">
            <input id="age" type="number" name="age">
        </div>
    </div>
    <div class="row">
        <div class="small-2 columns">
            <label for="email" class="middle">Email</label>
        </div>
        <div class="small-10 medium-4 columns">
            <input id="email" type="email" placeholder="[email protected]" data-ng-model="emailAddress">
        </div>
        <div class="small-5 medium-2 columns">
            <label for="phone" class="middle">Phone Number</label>
        </div>
        <div class="small-7 medium-4 columns">
            <input id="phone" type="tel" data-ng-model="phone">
        </div>
    </div>
    <div class="row">
        <div class="small-5 medium-2 columns">
            <label for="houseNumber" class="middle">House Number</label>
        </div>
        <div class="small-7 medium-2 large-1 columns">
            <input id="houseNumber" type="number" data-ng-model="houseNumber">
        </div>
        <div class="small-5 medium-2 large-1 columns">
            <label for="postCode" class="middle">Post Code</label>
        </div>
        <div class="small-7 medium-2 columns end">
            <input id="postCode" type="text" data-ng-model="postCode">
        </div>
    </div>
    <hr>
</section>