How do I set background colour to fill the entire code block container?

Site URL: https://www.oppidaneducation.com/families/skills-journey-1

I'm using the code block to display text and an icon. However when I set the background colour, it doesn't fill the entire container? Setting the height to 100% doesn't work. The CSS is:

.benefits {
  background: #f8f8f8;
  padding: 40px;
  border-radius: 20px;
  text-align: center;
}

Hey @benstevens05, I'd recommend using the Block ID of the code block, could you point us towards it on your website?

Hi @abibacon, it's these three blocks here and I've named the div class "benefits".

Hey @benstevens05, use the below targets to set the background

#block-e7c5584649c9f40ce296, #block-f959d1b0b59d2adbfbef, #block-0b13a1266f585d34b838 {

}

Hi @abibacon, sorry for any confusion but I'm not struggling to target the blocks. I've created a code block and set up a div class called "benefits". Then in the CSS I've set the background colour to be grey. The grey background appears but does not extend the full length of the code block container as you can see in the screenshot above.

Page doesn't work. Can you check again?

Hey @benstevens05 https://www.loom.com/share/d950c96639bb437385bc19c65ffade2c?sid=cfa98416-dfd2-48dd-9986-31efa0421dc0

1 hour ago, tuanphan said:

Page doesn't work. Can you check again?

@tuanphan sorry, it's here - https://www.oppidaneducation.com/families/skills-journey

On 11/21/2024 at 4:44 PM, benstevens05 said:

@tuanphan sorry, it's here - https://www.oppidaneducation.com/families/skills-journey

Use this to Website Tools > Custom CSS

@media screen and (min-width:768px) {
.fe-673d04d09478f641b87ed275 div.code-block>div>div {
    min-height: 350px;
}
}

Try it!

Add this code into custom css:

.benefits {
  background: #f8f8f8;
  padding: 40px;
  border-radius: 20px;
  text-align: center;
  display: inline-block; /* Ensures the box fits tightly around content */
  width: 100%; /* Ensure it spans the full width of its parent container */
  box-sizing: border-box; /* Includes padding and border in width calculation */
}

@Squareko Thanks for for the suggestion though sadly it doesn't work?