I need help making the corners round in a Feature grid with four column view block

Custom Coding
1

I used this Custom Code to change the colour of the text part of each feature

Captura de Tela 2023-11-21 às 11.22.54
Captura de Tela 2023-11-21 às 11.22.541000×370 33.8 KB

But now the corners of the feature part are not round anymore. Is there a way to fix this with a custom code? I would like the bottom and top corners to be rounded.

Captura de Tela 2023-11-21 às 11.22.36
Captura de Tela 2023-11-21 às 11.22.361920×818 132 KB

Tks a lot!

2

Can you try to add border-radius: 10px; below background: #444447 !important;

3

Captura de Tela 2023-11-21 às 11.44.04
Captura de Tela 2023-11-21 às 11.44.041308×538 44.5 KB

Like this? It did not work but maybe I am doing something wrong.

4

nope, inside }, just below background:....; (just below etc is an indication, not be written)

1 Like
5

Got it but now it looks like this

Captura de Tela 2023-11-21 às 11.49.03
Captura de Tela 2023-11-21 às 11.49.031920×765 132 KB

The corners of the black text area are round but there is white showing on the background.

I actually wanted only the bottom corners of the text area and the top corners of the picture to be round.

You are a real master Matthieu :slight_smile:

6

Okay, what is the type of block are you using? It’s a feature grid but which one exactly?
Feature grid with box and three column view?

7

Feature grid with four column view

8

Can you try this instead of your code? =>

<style>
#feature-grid6 .feature-box {
    background-color: #444447;
}

#feature-grid7 .feature-box {
    background-color: #444447;
}
</style>

Demo still here if needed (just scroll a bit): https://test-play.softr.app/hover-mouse

9

Captura de Tela 2023-11-21 às 12.16.43
Captura de Tela 2023-11-21 às 12.16.431920×900 146 KB

The bottom part is solved, the only part remaining is the top corners of the pictures to match the bottom corners of the text part

10

Okay as you are using a “cover” option of the image, and not “contain” option.

So it should be, finally:

<style>
#feature-grid6 .MuiBox-root.css-0 {
    background-color: #444447;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#feature-grid7 .MuiBox-root.css-0 {
    background-color: #444447;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

</style>

You can adapt 10px to have a different border corner.

3 Likes
11

You are tha man!

12 
<style>
#feature-grid6 .css-0 {  /*For future maintenance: .css-0 can be replaced by .MuiBox-root*/
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#feature-grid6 .feature-box {
    background-color: #444447;
}

#feature-grid7 .css-0 {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#feature-grid7 .feature-box {
    background-color: #444447;
}

</style>

Could work better, not sure the first is totally adapted.

2 Likes