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

9 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
3 hours ago, tuanphan said:

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

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

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.

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.

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