Background Color Not Filling Code Block

Hello! I am trying to figure out something seemingly very simple and I just cannot get there. I want to add a code block to my page for an element that will hover on top of an image when the mouse rolls over. I do not want to use a text block because I would like to be very specific about the format inside the block. To create a block filled with color, I used the following code:
 

<div class="wwHover">
[All my text paragraphs and headings whatever here]
<style>
.wwHover {  
background: #8FFF9A;
}
</style>
</div>

This does add the color, but only up to the point where the paragraph ends. It does not fill in the rest of the block when I expand it to the size I want in the fluid engine. As you can see in the image, the picture underneath is not covered even though the code block is the same size as the image block beneath it. I assume this has something to do with the class that the div is, or how the CSS is inherited for code-blocks, but I haven't been able to figure out the right combination. Any ideas?

Thanks!

7 hours ago, SPCC said:

Hello! I am trying to figure out something seemingly very simple and I just cannot get there. I want to add a code block to my page for an element that will hover on top of an image when the mouse rolls over. I do not want to use a text block because I would like to be very specific about the format inside the block. To create a block filled with color, I used the following code:
 

<div class="wwHover">
[All my text paragraphs and headings whatever here]
<style>
.wwHover {  
background: #8FFF9A;
}
</style>
</div>

 

This does add the color, but only up to the point where the paragraph ends. It does not fill in the rest of the block when I expand it to the size I want in the fluid engine. As you can see in the image, the picture underneath is not covered even though the code block is the same size as the image block beneath it. I assume this has something to do with the class that the div is, or how the CSS is inherited for code-blocks, but I haven't been able to figure out the right combination. Any ideas?

Thanks!

Can you share your URL so I can check it easier?

On 4/29/2024 at 10:08 PM, Beyondspace said:

Can you share your URL so I can check it easier?

Here you go:

https://tangerine-dahlia-l9hh.squarespace.com/programs

Password: spccupdate

So if you hover of "Bonsai Tree" you see the yellow box appears, that is what I will do with the code block on the green classroom below it, "Willow Woods" - I want to use a code block instead of a text block or image so a) it is a lot easier to update if rates change (not having to re-make an image) and b) so I can use the material icons in there to jazz it up a bit. 

That green box doesn't have the hover in there yet, that's fine. But as you can see, the box does not cover the image below it, even though in the fluid editor it is expanded that far. Thanks for your help!

This works great! Thank you. 

Nevermind about the centering. In my CSS I just got rid of the .sqs-block-content class and it works perfectly. I just need to also define the background color there instead of in the code block. Perfect!

Thank you!