Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 2, 2025 at 7:54 am #1480620
    THP Studio

    Hey Ismael,

    Another CSS query for you if you can.

    We are using the ALB Masonry element in many places, but setting the Background colour setting in the ALB element only seems to affect the filter section, and not the spaces between the individual masonry items.

    The only way we’ve been able to change that colour is with some CSS that is far from ideal as it affects multiple areas of the site (eg: the breadcrumb area, which we then have to overwrite with more css).

    The CSS used is:

    #main, .avia-msie-8 .av_header_sticky_disabled#header {
background-color: #191919;
}

    If you take a look at the example page in private, you’ll see there is black between the masonry items. But only due to this CSS above. Is there a better way to target this area? Any why isn’t the colour setting in the ALB element itself affecting the entire masonry element?

    Hope that makes sense, and thanks for the assistance as always.

    Tim

    April 3, 2025 at 8:27 am #1480698
    Ismael

    Hey Tim,

    Thank you for the inquiry.

    Have you tried moving the element inside a Color Section and applying a background color? If you need the section container to be full-width, you can make this modification.

    — https://kriesi.at/documentation/enfold/color-section/#color-section-with-100-content-width

    You can also target the inner av-masonry-container.

    .av-masonry-container {
    background: red;
}

    Best regards,
    Ismael

    April 3, 2025 at 8:29 am #1480699
    Ismael

    Hey!

    This should also help:

    .av-large-gap.av-masonry:after {
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

    Cheers!
    Ismael

    April 3, 2025 at 8:34 am #1480700
    THP Studio

    Hey Ismael,

    Thanks for the fast reply.

    I’ve tried 

    .av-masonry-container {
    background: red;
}

    but if you try it you will see that for some reason the left hand vertical edge doesn’t get affected. All other parts do, but never that left hand edge. It’s odd, and why I ended up using the code I posted in the OP.

    I haven’t tried the 100% width color section, thanks for the tip, but too late for that as this is now used across the site in many areas.

    April 3, 2025 at 8:37 am #1480701
    THP Studio

    If you try the staging link again you’ll see I’ve added your 2 lots of CSS in but the left hand edge isn’t being affected.

    • This reply was modified 3 weeks, 2 days ago by THP Studio.
    April 3, 2025 at 9:29 am #1480706
    Ismael

    Hi,

    Try to remove this css code:

    .av-masonry-container {
    background: red;
}

    And keep (https://kriesi.at/support/topic/background-colour-of-masonry-alb-element/#post-1480699). The Colors > Custom Background Color should be applied to the entire masonry element after removing it. You can also try this css code:

    #top .av-masonry.av-m04fp9di-542ac160671eb8fd749f26843e3e2910 {
    background-color: brown;
}

    Best regards,
    Ismael

    April 9, 2025 at 4:21 am #1481033
    THP Studio

    Hi Ismael,

    Thanks again, using only this code as you suggested did the trick:

    .av-large-gap.av-masonry:after {
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

    Really appreciate the help.

    Just a question – should this be included in the theme by default, as you’d expect the ALB color settings to affect the entire element area?

    Thanks

    Tim

    • This reply was modified 2 weeks, 3 days ago by THP Studio.
    April 9, 2025 at 8:12 am #1481050
    Ismael

    Hi,

    We’ll forward the issue to our channel. Thank you for your patience.

    Best regards,
    Ismael

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