CODEWITHSUNDEEP
csszurb-foundation
Codi
Codi

Reputation: 438

Foundation 6 Break point

I am new to foundation, I am originally a bootstraper. I have a 3 column row and i created a container to max-width of 1300px;

my issue is I need it to break at 767 to single columns but as of right now it don't break until 640px, is it controlled by the columns?

 <div class="row expanded">
   <div class="container">
   <h3>News</h3>
    <div class="columns small-12 small-4 medium-4">     
        <img src="img.png">
      <span class="text-element">Text</span>
      <h5>Heading Level 5</h5>
      <a class="link-button button" href="#">Learn More</a>
    </div>
    <div class="columns small-12 small-4 medium-4">    
        <img src="img.png">    
      <span class="text-element">Text</span>
      <h5>Heading Level 5</h5>
      <a class="link-button button" href="#">Learn More</a>
    </div>
    <div class="columns small-12 small-4 medium-4">  
       <img src="img.png">    
      <span class="text-element">Text</span>
      <h5>Heading Level 5</h5>
      <a class="link-button button" href="#">Learn More</a>
    </div>
  </div>

Upvotes: 1

Views: 53

Answers (1)

elicohenator
elicohenator

Reputation: 747

foundation's default breaking points are (as noted here):

Small - > 640px Medium - > 1024px Large - 1024px and larger.

if you wish to control these breakpoints you need to switch to the sass version where you can simply change the width and configure the framework to your needs. link is here: http://foundation.zurb.com/sites/docs/media-queries.html#default-media-queries

in my opinion, Foundation is much more flexible then bootstrap - so it might take time to adjust but it's totally worth it.

enjoy!

Upvotes: 2

Related Questions