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
2 hours ago, ArvinPaul said:

hi how do i adjust this in my mobile view?

Can you share link to your site? We can check easier

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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