Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 5, 2019 at 5:27 pm #1087529
    jonrouse

    Hello,

    I thought I’d check the forums to see if this was possible and it seems it is from this post.

    However the original poster figures it out and doesn’t say how.

    I have a three column masonry grid with the sorting options applied. The first ‘nthchild’ isn’t applying, but subsequent ones are.
    I am using this code. There will be 12 entries. Here is my code so far.

    #top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(1) .av-inner-masonry-content {
    background: rgba(226, 60, 76, 0.8);
}
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(2) .av-inner-masonry-content {
    background: rgba(226, 60, 76, 0.8);
}
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(3) .av-inner-masonry-content {
    background: rgba(229, 124, 142, 0.8);
}
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(4) .av-inner-masonry-content {
    background: rgba(61, 140, 142, 0.8);
}
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(5) .av-inner-masonry-content {
    background: rgba(238, 174, 4, 0.8);
}
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(6) .av-inner-masonry-content {
    background: rgba(210, 216, 70, 0.8);
}
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(7) .av-inner-masonry-content {
    background: rgba(144, 203, 209, 0.8);
}

    I can’t show the page because it’s part of a confidential project and I have to keep all the pages as drafts, but I hope there is enough info here for someone to be able to help me. This is my first time using nth child, so I don’t really understand it!

    April 6, 2019 at 3:04 am #1087643
    Jordan Shannon

    Hey jonrouse,

    The first one should be :first-child.

    Best regards,
    Jordan Shannon

    April 8, 2019 at 10:56 am #1088232
    jonrouse

    Thanks Jordan, but I still don’t get it. I’ve taken a screen grab of what I am seeing, and changed the code to black and white so I can try and figure it out. This seems to be the only way I can get it to work:

    #top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(2) .av-inner-masonry-content {
    background:  #ffffff; }
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(3) .av-inner-masonry-content {
    background: #000000; }
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(4) .av-inner-masonry-content {
    background:  #ffffff; }
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(5) .av-inner-masonry-content {
    background: #000000; }
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(6) .av-inner-masonry-content {
    background: #ffffff; }
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(7) .av-inner-masonry-content {
    background: #000000; }

    I’ve tried changing it to:

    #top .av-caption-style-overlay .av-masonry-item-with-image:first-child .av-inner-masonry-content {
    background:  #ffffff; }

    And nothing is happening. It’s working as I want it to, but I want to understand why nth:child(1) or first-child isn’t working.
    Is it because of the category filter?

    April 9, 2019 at 5:08 am #1088527
    Nikko

    Hi jonrouse,

    Try adding !important, so it’s not overridden:

    #top .av-caption-style-overlay .av-masonry-item-with-image:first-child .av-inner-masonry-content {
    background: #ffffff !important; 
}

    If that doesn’t help, can we ask for a link to the page mentioned? so we can inspect further.

    Best regards,
    Nikko

    April 9, 2019 at 10:18 am #1088614
    jonrouse

    Hi Nikko,
    Thanks for the help, but that didn’t work.

    Can you please leave this thread open and once I’ve published the page, I can post a link.
    Could first child be effecting something else on the page, as nth-child(2) seems to be the first (top left) in the two rows of 3?

    Thanks again.

    April 9, 2019 at 6:15 pm #1088771
    Jordan Shannon

    Hi,

    We will wait for the page to be published to inspect the code and check for sure.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.