Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Richard Feinburg
Richard Feinburg
2,970 Points
Posted by Richard Feinburg
Richard Feinburg
2,970 Points

Add Omega class with ACF/WP and 3 Breakpoints

I'm adding a new template page to an already made theme (using a Advanced Custom Field) and using the Cherry framework. Using that framework because the company I'm working for, using a theme that uses that framework. Anyway it's a responsive template and would like to know when I'm using ACF, that when it hits the last DIV tag in that row that it will add an "omega" to get rid of the right margin. That way it will not get push down under the first DIV because it will be too large. It's a 12 grid framework. I think I would have to setup a jQuery to add an omega class to the last jQuery or add the omega when the div add up to 12.

<div class="row">
      <div class="grid_4"></grid>
      <div class="grid_8 omega"></grid>
</div>
<div class="row">
      <div class="grid_2"></grid>
      <div class="grid_2"></grid>
      <div class="grid_2"></grid>
      <div class="grid_2"></grid>
      <div class="grid_2"></grid>
      <div class="grid_2 omega"></grid>
</div>

UPDATE!

Should I just use this website, http://gridpak.com/ to get around this problem? If those, does the javascript/jQuery does all the media breaks and adding there own omega "no right margin"?

3 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Would the simple solution of adding a count to your Loop work?

Richard Feinburg
Richard Feinburg
2,970 Points
Richard Feinburg
Richard Feinburg
2,970 Points

Image of what I want it to do. If I'm not typing it wrong.

<img>http://s10.postimg.org/jqbltjo3d/Untitled_2.png</img>

Richard Feinburg
Richard Feinburg
2,970 Points
Richard Feinburg
Richard Feinburg
2,970 Points

Thanks Zac. I got it working. What I did was to add an nth-child(3n+3) and/or nth-child(6n+6) to the grid class that needed in the right media queries. That way I can add as many DIV in the ACF without worrying about the pushing to the next line. The example below of my grid system so I don't have to worry about getting push the the next line to the last grid in the col class DIV. :-)

Example

<div class="col">
    <div class="grid_4"></div>
    <div class="grid_8></div>
</div>
<div class="col">
    <div class="grid_12"> </div>
</div>
<div class="col">
    <div class="grid_2"></div>
    <div class="grid_2"></div>
    <div class="grid_2"></div> <!-- No Right Margin for Tablet -->
    <div class="grid_2"></div>
    <div class="grid_2"></div>
    <div class="grid_2"></div> <!-- No Right Margin for Tablet or Desktop -->
    <div class="grid_2"></div>
    <div class="grid_2"></div>
    <div class="grid_2"></div> <!-- No Right Margin for Tablet -->
    <div class="grid_2"></div>
    <div class="grid_2"></div>
    <div class="grid_2"></div> <!-- No Right Margin for Tablet or Desktop -->
    <div class="grid_2"></div>
    <div class="grid_2"></div>
    <div class="grid_2"></div>
</div>

// CSS GRID

.grid_1 { width: 5.982905982905983%; }
.grid_2 { width: 14.52991452991453%; }
.grid_3 { width: 23.076923076923077%; }
.grid_4 { width: 31.623931623931625%; }
.grid_5 { width: 40.17094017094017%; }
.grid_6 { width: 48.717948717948715%; }
.grid_7 { width: 57.26495726495726%; }
.grid_8 { width: 65.81196581196582%; }
.grid_9 { width: 74.35897435897436%; }
.grid_10 { width: 82.90598290598291%;}
.grid_11 { width: 91.45299145299145%; }
.grid_12 { width: 100%; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12    {
    margin: 0 2.564102564102564% 2.564102564102564% 0;
    float: left;
    display: block;
    outline: 1px solid lightblue;
}
.col .grid_2:nth-child(6n+6) { margin-right: 0px; }
.col .grid_1:last-child,
.col .grid_2:last-child,
.col .grid_3:last-child,
.col .grid_4:last-child,
.col .grid_5:last-child,
.col .grid_6:last-child,
.col .grid_7:last-child,
.col .grid_8:last-child,
.col .grid_9:last-child,
.col .grid_10:last-child,
.col .grid_11:last-child    { margin-right: 0px; }

.alpha  { margin-left: 0px; }
.omega  { margin-right: 0px; }

.clear{ clear: both; display: block; overflow: hidden; visibility: hidden; width:0; height: 0; }
.clearfix:after{ clear: both; content:' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }
* html .clearfix,*:first-child+html .clearfix{ zoom: 1; }


@media (max-width: 480px) {
    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12 { width: 100%; }
}

@media (min-width: 481px) and (max-width: 979px) {
    .grid_1,
    .grid_2 { width: 31.6239316239%; }
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10 { width: 48.7179487179%; }
    .col .grid_2:nth-child(3n+3) { margin-right: 0px; }
}