Home Forums Weaver Xtreme Theme Cover block: colour overlay offset from block image

Topic Resolution: Resolved
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #67958
    dillon
    Participant

    An odd quirk when using the cover block on a new page. Nb I’m not seeing this anywhere else on existing pages my site, but I haven’t added any new pages for a while.

    It’s on this page https://www.innerresourcing.co.uk/?page_id=3151&preview=1&_ppp=078f5534a5

    If you scroll down to the cover with the bright pink overlay (with words beginning “What do you want in life?”) you can see that the pink overlay is offset vertically from the block and the cover image, i.e. they don’t line up top and bottom.

    When I inspect the element, I can get them to line up by switching off the 1.2em margin-top setting on the block (i.e. #content [class^=”wp-block-“] margin-top: 1.2em) but is this how it should work? Should the margin not apply to the whole block including colour overlay and not just the image?

    I’m also trying to see how to actually fix this – I’ve tried adding a class to the cover block setting the top-margin to zero, but this isn’t having an effect (although it looks like it has in the inspection tool). I’m really confused.

    If I select either “fixed background” and/or “repeated background” in the block settings it does fix it, but it also zooms in on the photo which isn’t what I’m wanting…

    Please help!

    #67959
    scrambler
    Moderator

    This is because of the default top margins on block.

    You can remove the block top margins on all blocks by adding the rule below to the Theme Global Custom CSS Rule box

    #content [class^=wp-block-] {margin-top:0;}

    or you can remove it only on cover blocks using

    #content [.wp-block-cover__inner-container {margin-top:0 !important;}

    #content .wp-block-cover__inner-container {margin-top:0 !important;}

    #67960
    dillon
    Participant

    @scrambler thanks for your reply. The first of those rules (for all blocks) works, but the second (for cover blocks) doesn’t – is there a typo maybe?

    #67961
    scrambler
    Moderator

    Yes, leftover bracket, here is the corrected one

    #content .wp-block-cover__inner-container {margin-top:0 !important;}

    #67975
    dillon
    Participant

    That’s still not working.

    OK I had another play around and it seems that .wp-block-cover__image-background is the class that needs to have the top margin set to zero, so using

    #content .wp-block-cover__image-background {margin-top:0 !important;} works!

    Thanks for your help.

    #71297
    sbarnessckls
    Participant

    I have started seeing this problem recently, but ONLY on sites we host that are using Weaver Xtreme, not other classic themes.  In my case (with Weaver Xtreme v. 5.0.7 and WordPress 6.1), the  issue was that the overlay did not extend to the bottom of the image.

    None of the above code examples quite did the trick for me, but this version does work, when added to the Global Custom CSS:

    #content [class^=wp-block-] {margin-top:0; margin-bottom:0;}

    Thanks to previous posters who got me almost all the way there!

     

    #71301
    Weaver
    Keymaster

    The block cover block does not have correct background styling in Weaver Xtreme v5. I just discovered this problem (especially in the block editor view). This will be fixed in the next version of Weaver Xtreme : V6.1. Will release that within a week or so.

    And the top/bottom margins were messed up, too. I’m pretty sure this is due to some change in how WP is styling some blocks now, especially the image and cover block. That also will be fixed in V6.1.

    I don’t know when the WP styling changed on these. I checked out some other themes with a lot of options, and they too have issues with styling image and cover blocks. I think most themes leave a bit of space between blocks (Weaver Xtreme has, and will again), but I’m seeing several themes that don’t leaver any margin now – all the image blocks run together. I don’t like that style myself, but the old margin rule failed to work at some point. The new version will leave a margin now.

    In fact, your rule #content [class^=wp-block-] {margin-top:0; margin-bottom:0;} is exactly the rule that was broken. Weaver Xtreme 5 had a different value for that rule, but it broke how images were displayed. In Weaver Xtreme 6, that rule will be completely removed as that seems to be the default for normal blocks, but the image blocks required their own explicit margin rules. Timing is funny – I did not understand your issue at first, but was working on Version 6 and saw some of my test pages for the block editor were now behaving badly.

    #71303
    Private Reply
    sbarnessckls
    Participant
    This reply has been marked as private.
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.