Condense 5 spanning image/text blocks to columns of 2 on mobile

Site URL: https://oakpointpartners.com/corporate-remnants

I have code that spans 5 image blocks across a screen that I like having on desktop

//Full span 5 image blocks
@media screen and (min-width:767px){section[data-section-id="623a4543be9cf7660e3aef87"] {
  .sqs-col-3, .sqs-col-2 {
    width: 20% !important; 
  }
  }}

However, on mobile, all images and text blocks stack on top of each other. Is there a way to display the images in two columns? Ex below:

XX
XX
X

------------------

Also, separate question. Is there a way to display a different favicon for one specific webpage?

You mean Team People?

Don't remove any code in your current code. Add this to Design > Custom CSS

/* corporate-remnants - mobile team 2 columns */
@media screen and (max-width:767px) {
div#page-section-623a4543be9cf7660e3aef87>.row>.col {
    width: 50% !important;
    float: left !important;
}
div#page-section-623a4543be9cf7660e3aef87>.row>.col:nth-child(2n+1) {
    clear: left !important;
}
}

@tuanphan I added people to my "Meet the Deal Team" section. Can you amend the code so the bottom 4 people are centered on desktop?

Also, I think the mobile code needs to be fixed. They should be displayed as:
EL MC

JM MR

AK MP

JA CC

RP

https://oakpointpartners.com/corporate-remnants

Nevermind about centering the images withing the section. I found code to make it work. However, the mobile code to show the people in two columns does not work still and I'll need help. Thanks

Add to Design > Custom CSS

/* Team mobile */
@media screen and (max-width:767px) {
div#page-section-623a4543be9cf7660e3aef87>.row {
    width: calc(!"50% - 20px") !important;
    float: left !important;
}
div#page-section-623a4543be9cf7660e3aef87>.row:first-child {
    margin-right: 40px;
}
}

Hey @tuanphan, when I go to paste the code, it says there's a syntax error in the following line:

width: calc(!"50% - 20px") !important;

On 4/26/2022 at 10:38 PM, bawebb123 said:

Hey @tuanphan, when I go to paste the code, it says there's a syntax error in the following line:

width: calc(!"50% - 20px") !important;

ah sorry, missing a symbol, change ! to ~

It should be

width: calc(~"50% - 20px") !important;