Column mixin outputs strange behaviour. about jeet HOT 3 CLOSED

Hey,
I had the same behaviour, but fixed it.
My HTML looked like that :

<section>
  <h1>Projects</h1>
  <div class="project">
    <h2>Project 1</h2>
  </div>
  <div class="project">
    <h2>Project 2</h2>
  </div>
  <div class="project">
    <h2>Project 3</h2>
  </div>
  <div class="project">
    <h2>Project 4</h2>
  </div>
</section>

However, @include column() eventually uses nth-child, like below :

div.project:nth-child(n) {
  margin-right: 3%;
  float: left;
  clear: none;
}

div.project:nth-child(3n) {
  margin-right: 0%;
  float: right;
}

div.project:nth-child(3n + 1) {
  clear: both;
}

In my case, the first div.project was actually the 2nd child of the container.
I'm pretty sure your "Project 1" is also 2nd child of its container.
Maybe the first child is your top bar.

I did something like that :

<section>
  <h1>Projects</h1>
  <ul class="projects">
    <li><h2>Project 1</h2></li>
    <li><h2>Project 2</h2></li>
    <li><h2>Project 3</h2></li>
    <li><h2>Project 4</h2></li>
  </ul>
</section>

Also more semantically correct.

from jeet.

Hey,
Thanks for the suggestion. My gallery looks ok right now with HTML code written as follows:

<ul> <li class='projectGalleryElement' ng-repeat='project in projectsList | filter: projectTypeFilter'> <a href='#projectTemplate/{{project.id}}'> <div class='pictureMockup'> <img src="" alt=""> </div> <div> {{project.name}}<br> {{project.location}} </div> </a> </li> </ul>

SCSS class definition is the same as before.

from jeet.

Thanks for the help @Philoozushi 👍

from jeet.