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

Topic Resolution: Resolved
Viewing 5 posts - 1 through 5 (of 5 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.

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