SOLVED: Custom CSS on loop doesn't apply on second instance

I have the same issue as outlined here: ACF Loop Quantity - #2 by WeLoVeBricKs

Where I want to limit the amount of items shown in a loop, but also want to show in the first instance of the loop 1-3, second instance 4-6, third instance 7-9.

I tried .one:nth-of-type(4), .one:nth-of-type(5), .one:nth-of-type(6), .one:nth-of-type(7), .one:nth-of-type(8), .one:nth-of-type(9) { display: none; }

and used .one and .two class for the two seperate instances of the loop

But something odd happens. No matter the classes, the display:none rule only applies to the first loop of the page, but it’s like the custom css doesn’t exist on the second instance.

They have seperate classes for background settings, and the custom css is unrelated to classes, targeting the element itself by .one and .two. I’ve also tried with root:nth-of-type.

I tried changed the number for nth of type, to target it properly (in my screenshare, it’s targeted the same nth of type, but even then all 9 items are shown, instead of just 3).

This is SUPER inconvenient, as that means I have to re-build the entire back end for this page.

This also doesn’t allow me to use Bricks builder for any magazine sites because of this limitation. Even the Posts element doesn’t have any way to limit to posts shown! Not to mention what post number it needs to start from… Big bummer. Please adjust.

Update - putting the Container which originates the Loop clears up this conflict.
https://emagazines.tempurl.host/solutions/

However the request still stands - to choose 1) the number of items shown in a loop of any kind and in Post element, and 2) to choose the offset from which the items need to begin.

Hi Ace,
Thank you very much for your report!

The number of items in a loop is set by the “posts per page” parameter, and the “offset” parameter sets the offset. Because of the simplicity of the answer: It seems I did not understand your report at all :joy:

Hi @timmse - I guess I’m just not seeing this option? Can you please highlight this in a screenshot? Maybe I am overcomplicating it because I don’t see the option on my end.

Hey Ace,
Sure, no problem:

Best regards,
timmse

@Timmse

Meanwhile, this is what I see:

Aaaah, somehow I missed the ACF repeater part :face_with_open_eyes_and_hand_over_mouth: and find it extremely difficult to follow your video, because it has no sound and it’s even harder without a live link.

What happens if you insert the custom CSS into the Bricks Settings or the Page CSS instead of the Loop? This way you make sure it is there in any case.

Sorry, my mic is broken

I’ve linked to the page earlier, but must’ve gotten missed: https://emagazines.tempurl.host/solutions/

I managed to make it work by putting the Container that propogates the Loop into a Section, and that resolves whatever css conflict was going on.

So this specific bug is solved - but in general, for ACF, would be nice to have the same options as for Posts. But glad there is the option for Posts to set offset and item amount.

Sorry, my mistake: I thought Solutions – eMagazines was a local URL :dizzy_face: :joy: But I’m glad you were able to solve the problem :slight_smile:

Best regards,
timmse

1 Like