CODEWITHSUNDEEP
drupalmedia-querieszurb-foundation
Kaustubh Bhagwat
Kaustubh Bhagwat

Reputation: 1

What all the necessary settings for foundation breakpoints to work?

I have foundation setup in my Drupal site I want to implement the breakpoints from the foundation. I have following settings for breakpoints

$breakpoints: ( small: 0, medium: 640px, large: 1024px, xlarge: 1200px, xxlarge: 1440px, );

$breakpoint-classes: (small medium large);

What else settings is required for breakpoints to work.

Upvotes: 0

Views: 49

Answers (1)

Nicolas Pinos
Nicolas Pinos

Reputation: 137

Basically all you need is to implement those classes on your markup

Here is an example using Foundation default classes:

<div class="row">
  <div class="small-6 medium-4 columns"></div>
  <div class="small-6 medium-8 columns"></div>
</div>

Make sure you have the viewport metatag in the <head> of your markup:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Also, inside any style definition you can override it using your breakpoints like this:

.my-background {
  background-color: #FFFFFF;
  @include breakpoint(medium only) {
    background-color: #000000;
  }
}

Whatever you define between those braces will affect screens within your "medium" breakpoint.

Check out the documentation

Upvotes: 2

Related Questions