My recent project involved creating a simple .isotope gallery, and when viewing the selected #portfolio-wrap container in Chrome Dev Tools, here is how it appears:
Unfortunately, I am unable to upload three links here. Please visit this link for more information:
--> Gallery - check image 1 <--
Each .isotope object (a circle with text) has the following CSS:
margin: 0 10px 0 10px;
Here is how it looks on the screen:
--> Check image 2 now <--
There are four objects in the row. What I want is no margins for left and right side of first and fourth item so that every one is sticking to "walls" of parent body container.
Edit:
Every item should have bottom margin of 20px and every item except 1,5,9 or in other words 4n+1 should also have left-margin of 20px. So they will nicely stack. image
I attempted to achieve this using `nth-child`:
#portfolio-wrap > div:nth-child(4n+1) {
margin: 0 0 20px 0;
}
However, this approach caused some bugs in the Isotope layout, as shown below. The red numbers represent consecutive child numbers as per the code without filtering:
--> Check image 3 now <--
While the margin applied correctly to the first and fifth children, there were two persistent issues:
- The applied margin did not change after filtering.
- An alignment bug was present, as shown in the last Imgur link.
Regarding point 1,
I found a JavaScript solution to address one of the problems, but it only partially worked for me: Stackoverflow - click When applying the 4n+1 code, it does not seem to work. Can someone help find the issue? (I'm not very experienced with JavaScript)
var x = 0;
$('.portfolio-item:not(.isotope-hidden)').each(function(){
for (x = 4*x+1; x <= 50; x++ ) {
$(this).css('margin','0 0 20px 0')
} else {
$(this).css('margin','0 0 20px 20px')
}
})
As for point 2,
I'm unsure about the cause of the alignment bug. It's not due to excessive margins affecting the wrapper.
Update for everybody:
I managed to fix my JavaScript code, and it now works as intended:
$('.portfolio-item:not(.isotope-hidden)').each(function()) {
for (x = 1; x <= 50; ++x) {
if ((x - 1) % 4 == 0) {
$(this).css('margin','0 0 20px 0')
} else {
$(this).css('margin','0 0 20px 20px')
}
}}
Despite resolving the JavaScript issue, the layout bug persists as seen in image 3!
Additionally, the JavaScript is not applying new margins after filtering... :(
Update 2:
To solve the problem, I incorporated gutterWidth (refer to Isotope manuals). However, applying just the gutterwidth is insufficient; you need to include a lengthy piece of code from the demo showcasing gutterwidth specifications. Isotope documentation could use improvement in this area.