Menu icon Foundation
F6 - Custom breakpoint based on size and orientation

Hi guys,

I am trying to create a custom breakpoint for the flex grid to enable me to define different column width values dependant on screen size and orientation (landscape or portrait). In effect I want to be able to change the column number if the device is in portrait orientation.

I have achieved this within F5 but the new mixins are causing me difficulty in F6 so I hope you can help.

In effect I want to be able to have a breakpoint called something like smallport or mediumport so that I can define columns like the code shown below.

I am using SASS and would really appreciate any pointers.

Cheers,

Will

<div class="row">
    <div class="small-6 smallport-12 medium-8 mediumport-6 columns">
        This is some text
    </div>
    <div class="small-6 smallport-12 medium-4 mediumport-6 columns">
        This is a side bar...
    </div>
</div>
            

         

Sassmedia queriesbreakpointsfoundation 6

Hi guys,

I am trying to create a custom breakpoint for the flex grid to enable me to define different column width values dependant on screen size and orientation (landscape or portrait). In effect I want to be able to change the column number if the device is in portrait orientation.

I have achieved this within F5 but the new mixins are causing me difficulty in F6 so I hope you can help.

In effect I want to be able to have a breakpoint called something like smallport or mediumport so that I can define columns like the code shown below.

I am using SASS and would really appreciate any pointers.

Cheers,

Will

<div class="row">
    <div class="small-6 smallport-12 medium-8 mediumport-6 columns">
        This is some text
    </div>
    <div class="small-6 smallport-12 medium-4 mediumport-6 columns">
        This is a side bar...
    </div>
</div>
            

         
Brandon Arnold over 3 years ago

Hey Will, We've never done this before, did you end up figuring out a solution. Would love to hear about it!

Will Fairhurst over 3 years ago

Brandon,

I did eventually...in a way... :-)

It occurred to me that I was going about it the wrong way. Why did I need to know the orientation when (for me at least) I was really just interested in the available width.

I have therefore created additional breakpoints in the _settings.scss file and reference those instead. See below...

$breakpoints: (
  smallport: 0px,
  small: 376px,
  mediumport: 668px,
  medium: 1024px,
  large: 1210px,
  xlarge: 1440px,
  xxlarge: 1921px,
);

$breakpoint-classes: (smallport small mediumport medium large);

This enables me to define column sizes like this:

<div class="row">
    <div class="smallport-12 small-6  mediumport-6 medium-8  columns">
        This is some text
    </div>
    <div class="smallport-12 small-6  mediumport-6 medium-4  columns">
        This is a side bar...
    </div>
</div>

Hope that helps.

Cheers,

Will