Jump to content

Background Color Not Filling Code Block

Go to solution Solved by Beyondspace,

Recommended Posts

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!

SPCC-ScreenshotDIVIssue.png

Link to comment
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!

SPCC-ScreenshotDIVIssue.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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!

Link to comment
  • Solution
Posted (edited)
9 hours ago, SPCC said:

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!

You can try the following custom css code to make green box cover images below

#block-yui_3_17_2_1_1713373158991_61131 .wwHover, #block-yui_3_17_2_1_1713373158991_61131 .sqs-block-content {
  height: 100%;
  box-sizing: border-box;
}

My testing

image.thumb.png.eb50261e25393a44c2d692032f8ae303.png

Let me know how it works on your site

Edited by Beyondspace

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
Posted (edited)

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!

Edited by SPCC
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.