Customise text background of summary items

Site URL: https://www.camberwellarts.org.uk/caf21-inside-out-events

Hi, I'm looking to match the style of grey background of the summary on this page: https://www.camberwellarts.org.uk/whats-on to the two summaries on this page: https://www.camberwellarts.org.uk/caf21-inside-out-events

I made these edits about a year ago so struggling to remember how to action this to the individual cards and not fill the entire block. I know I need to target these sections specifically as I only want this across the four pages listed at the top (EVENTS | EXHIBITIONS | OPEN STUDIOS | ARTS MARKET)  but can't figure out the base of the code. 

Any recommendations into how to remove the comma between category boxes would be really helpful too. 

Password: caf21

Thank you! 

Normally this should work:

.summary-item {
background-color:grey;
margin:5px;
padding:10px;
}

But it seems to be messing up the padding of the second summary, so I targeted each element inside:

.summary-item {
background-color:grey;
margin:5px;
}

.summary-thumbnail-outer-container {
padding:10px;
}

.summary-title {
padding:10px;
}

.summary-excerpt {
padding:10px;
}

.summary-metadata-item {
padding:10px;
}

However, your second summary items are not collapsing into single column when I minimized the site. This causes the above CSS to mess up. Did you do something to keep them affixed at 3 columns? Maybe that's also why the first code has a messed up padding.

Hi, thanks for your response. The first code seems to be the thing I'm looking for but not sure why it's cutting off with the calendar summary. I think because the bottom summary is a carousel this splits its width rather than stacking.  

When applied this is forcing the last entry to drop onto a new line (see attached) despite it usually fitting. Is this because of the added padding on the cards now making the block wider than usual?

This was the previous CSS I've used on the grey option - could either of these be the issue?

.collection-type-events-stacked.view-item main#page {
    padding-left: 10vw;
    padding-right: 10vw;
}

#page-section-5f819972258d731d2133af79 .sqs-block-summary-v2 .summary-item.positioned {
  background: #f2f2f2;
  padding: 1vw;
}

I don't want this to be across all summaries on the site only on a few select pages - what is the best way to target these? With a Block ID? 

Thanks!

Hi, I've swapped out the carousel and this seems to be working perfectly - thank you so much for your help!! 🙂 

On 6/11/2021 at 2:09 AM, colleenalicee said:

Hi, I've swapped out the carousel and this seems to be working perfectly - thank you so much for your help!! 🙂 

Do you need fix these?

Site URL – https://www.camberwellarts.org.uk/

1. (Tablet-Footer) Increase column 2 text width?

2. (Homepage) Change google captcha link color?

3. (Mobile-Arts directory) Make 2 columns to reduce height?

4. (Tablet-About Us) Increase width, reduce title?