Move Cover Block Container Outside Cover Block

  • Hello,

    I am currently finalising a new site and working on the mobile version.

    I am using the latest version of WordPress with a twenty-sixteen child theme – https://www.staging2.wasfimedical.com/

    At the top of the page, you will see I am using the native Gutenberg Cover block. Everything is working perfectly on the desktop.

    The issue arises when I am on mobile, the content of the “Block Cover Inner Container” is far too large and therefore I need to move it “below” the image that it currently sits on.

    I have been playing with numerous different CSS layouts to try and get it to move below the block cover image on mobile but I just can not do it.

    Any help would be greatly appreciated.

    Regards, Noel.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    I dunno, looks OK to me: https://i.imgur.com/ASNBpvL.jpg

    You cannot really move the inner element out of the overall cover element because it’s within the element as a child. Attempting to move it causes it to be clipped or disappear entirely because it’s positioned outside of the parent’s container.

    You could make the background solid white so the cover image looks smaller since much of it is covered by the inner element. You could alter the minimum-height rule to be less. Looks like you may have already done so? Down to 500px from 700px? You could make it even less, but then the solid inner background would obscure most of the image. Might be OK to leave it semi-transparent and lessen the minimum-height even more.

    Thread Starter Design Locker

    (@design-locker)

    Thank you so much for the reply, appreciate it. Yes, I was fairly certain I could not move it “out” of the inner container, was hoping there might be a way using the “position” property.

    Therefor I just went the solution you now see which is not ideal but the client is happy with.

    Again, thank you.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Move Cover Block Container Outside Cover Block’ is closed to new replies.