Jump to content

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

Recommended Posts

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?

Link to comment

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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;

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.