Styling the Team Member Blurb with a frame and some text padding

Hi Chrilles,

I’m not sure I fully understand your intentions, could you post a screenshot highlighting what you would like to achieve please?

Best regards,
Rikard

Hi,
Thank you for your patience and for the links, on your site I see the images are not the same size, one is landscape, one is normal 467px x 467px (middle) and the first one is 1200px x 832px, so I recommend trying to use the same image size for all of them. Then I notice that your “title” is very long due to your language, since I doubt you want to hyphenate it I recommend using a smaller font size.
So as an example I created 6 simple team member elements with only an image and a little dummy text:

then I placed 3 in a grid row element as I described in the thread you linked to and 3 in 1/3 columns like you have on your site:

then I added this css for the box-shadow and text padding you were asking about:

.avia-team-member {
    box-shadow: 0px 2px 18px 0px rgb(0 0 0 / 30%);
}
.team-member-description {
	padding: 0 15px 10px 15px;
}

and this was the result:

This seems like the result you were looking for, I like the grid row layout as it seems more full width, but the columns also have a nice boxed look. Hope this helps.

Best regards,
Mike

Hi,
Sure, I just had based this off of the thread you linked to.

Best regards,
Mike

Hi,
I see that you have this custom css in your /wp-content/uploads/so-css/so-css-enfold.css

div .flex_column {
  display: flex;
}

removing it will correct the layout

Best regards,
Mike

Hi,
Sure, but perhaps you could explain further what you mean, because the column widths are controlled by the column elements that you use ie; 1/3, 1/4, 1/2, etc and the width of the page container, so using the best suited column is better than forcing a 1/4 column to 33% width, and sometimes it would be better to change the padding of the page so the elements have more room, and other times adding or removing the padding or margin between the columns would be a solution. So it really kind of matters what you are trying to achieve.
But if you really want to just modify the column widths you can find them in /wp-content/themes/enfold/css/grid.css
These are the defaults

div .av_one_fifth {
  margin-left: 6%;
  width: 15.2%;
}
div .av_one_fourth {
  margin-left: 6%;
  width: 20.5%;
}
div .av_one_third {
  margin-left: 6%;
  width: 29.333333333333332%;
}
div .av_two_fifth {
  margin-left: 6%;
  width: 36.4%;
}
div .av_one_half {
  margin-left: 6%;
  width: 47%;
}
div .av_three_fifth {
  margin-left: 6%;
  width: 57.599999999999994%;
}
div .av_two_third {
  margin-left: 6%;
  width: 64.66666666666666%;
}
div .av_three_fourth {
  margin-left: 6%;
  width: 73.5%;
}
div .av_four_fifth {
  margin-left: 6%;
  width: 78.8%;
}
div .av_one_sixth {
  margin-left: 6%;
  width: 11.666666666666666%;
}
div .av_one_seventh {
  margin-left: 6%;
  width: 9.142857142857142%;
}
div .av_one_eighth {
  margin-left: 6%;
  width: 7.25%;
}
div .av_one_nineth {
  margin-left: 6%;
  width: 5.777777777777778%;
}
div .av_one_tenth {
  margin-left: 6%;
  width: 4.6%;
}

Best regards,
Mike

Hi,
Thank you for the feedback and the link to your page, in this situation the page is using the boxed layout so the page is contained at the body div so the element can not brake out of this, you will need to change to the full-width layout and then contain the elements you wish to 1310px, such as the footer & header.
As for the box shadow, please add a custom class the to the 1/3 columns and change the css to reflect:

.custom-class {
box-shadow: 0px 2px 18px 0px rgb(0 0 0 / 30%);
}

Best regards,
Mike