Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Creating 5 equal width image blocks on one row


Sienawalker

Question

13 answers to this question

Recommended Posts

  • 0

I was able to find a solution, so I am sharing it here in case anyone runs into a similar issue:

Important notes, your section ID will need to be updated with your own ID, and you need each image block authored to be in either 3 columns or 2 columns for this to work. If you have multiple sections where you want this to work, you will need to add this code for each section.

//equal size blocks//
section[data-section-id="5f561a6cfab9b365a25a1e21"] {
  .sqs-col-3, .sqs-col-2 {
    width: 20% !important; 
  }
}

 

image.thumb.png.35fd1e1acef71a31de7d4505f1c2c770.png

Link to comment
  • 0
On 5/25/2021 at 10:13 AM, ArvinPaul said:

You mean The process boxes? I see they same height here

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
3 hours ago, ArvinPaul said:

yes they are same height in desktop but in mobile view it looks very small and weird, I need it to look normal 

You want them in same row, or 2-3 icons/row?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 6/5/2021 at 3:11 PM, ArvinPaul said:

i want them in same row @tuanphan

Hi. If same row, it looks very small. Add this to Design > Custom CSS

/* Process boxes same row */
@media screen and (max-width:767px) {
div#block-c3ddfdbdb414ab820848+.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
[data-section-id="60ab4676f86d4d759f216e43"] .content-wrapper {
    padding-left: 0 !important;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 9/7/2020 at 9:20 AM, Sienawalker said:

I was able to find a solution, so I am sharing it here in case anyone runs into a similar issue:

Important notes, your section ID will need to be updated with your own ID, and you need each image block authored to be in either 3 columns or 2 columns for this to work. If you have multiple sections where you want this to work, you will need to add this code for each section.

//equal size blocks//
section[data-section-id="5f561a6cfab9b365a25a1e21"] {
  .sqs-col-3, .sqs-col-2 {
    width: 20% !important; 
  }
}

 

image.thumb.png.35fd1e1acef71a31de7d4505f1c2c770.png

 This solution no longer works, unfortunately. Anybody have any success overriding Sqsp's column widths?

Link to comment
  • 0
On 4/19/2022 at 9:08 PM, holagabriela said:

 This solution no longer works, unfortunately. Anybody have any success overriding Sqsp's column widths?

Can you share link to page where you have problem? We can help easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 4/23/2022 at 2:12 AM, holagabriela said:

I remember I sent code yesterday

Add to Design > Custom CSS

@media screen and (min-width:992px) {
div#page-section-620e3e4177a02e7f7caa16ad>.row:nth-child(2)>.col {
    width: 20% !important;
}}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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...