Create a border with or without shadow for any of your dynamic block

Custom Coding
, , , ,
1

Here is the demo: https://test-play.softr.app/test-box-block
Here is the code, just change the block ID

<style>
#list-details1 {
  border-radius: 11px;
  border: 4px solid #000000;
  padding: 20px;
  margin: 20px;
  box-shadow: 2px 2px 5px #000000;
}
</style>
1 Like
2

Great idea Matthieu, thanks !

I used it for the first block of my list-detail here.

I just changer a bit the code for :

  • Overflow:hidden because my background was on top of the “border-radius”
  • Increased the margin for laptop and decreased for smartphone
  • Withdrew the border.
<style>
#list-details2 {
  border-radius: 20px;
  margin: 0px 10px;
  box-shadow: 4px 4px 10px #F0EFFD;
  overflow: hidden;
}

@media screen and (min-width: 800px) {
#list-details2 {
  margin: 0px 120px !important;
}
}
</style>
3

First, thank you @matthieu_chateau for all your little code snippets. It really helps.

Second, this currently makes a border around the entire section, however, I would like to have a border that “sticks” to the part with the data (See attached my beautiful artwork to illustrate). Having the border around the entire section is not really appealing visually on large screens. I already tried to play with the margins/padding, but wasn’t able to have the border where I want it. Im trying to reproduce something similar to LinkedIn feed for example.

SharedScreenshot
SharedScreenshot1917Ă—695 74.3 KB

4

Hi!

Can you try this one?

<style>
#list-details1 {
  border-radius: 11px;
  border: 3px solid #ebebeb;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 1px;
  padding-right: 1px;
  margin: 100px;
  box-shadow: 2px 2px 5px #ebebeb;
}

  @media screen and (max-width: 600px) {
    #list-details1 {
      padding: 5px;
      margin: 20px;
    }
  }
</style>

You can go to https://test-play.softr.app/test-box-block to see the result.
Note that it is also linked to the padding top and bottom of of your block (the one you set in the Softr studio). Here list-details 1 has a padding top and bottom set as “L”

Second possibility: use the right container selector inside the block. It should be this one
In this case, do whatever you want with the padding top and bottom of your block inside the Softr studio

<style>
#list-details1 .css-1cn3yto {
  border-radius: 11px;
  border: 3px solid #ebebeb;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  box-shadow: 2px 2px 5px #ebebeb;
}
</style>

The result will be this one: https://test-play.softr.app/test-box-block-copy

1 Like
5

Thanks matthieu. I had to find the right container, the one you mentioned doesn’t include the title/subtitle of the block.

for anyone interested of reproducing the look below here is the code with the container that includes the title/subtitle:

<style>
#list-details1 .container.MuiBox-root.css-0,
#list-details2 .container.MuiBox-root.css-0,
#list-details3 .container.MuiBox-root.css-0,
#list-details4 .container.MuiBox-root.css-0,
#list-details5 .container.MuiBox-root.css-0,
#list-details6 .container.MuiBox-root.css-0,
#list-details7 .container.MuiBox-root.css-0,
#list-details8 .container.MuiBox-root.css-0,
#list-details9 .container.MuiBox-root.css-0 {
  border-radius: 11px;
  border: 1px solid #d1d1d1;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  background-color: white;
}
</style>

SharedScreenshot
SharedScreenshot1282Ă—515 33 KB

1 Like