Jump to content

Centering Multiple Image Blocks in an Entire Section

Recommended Posts

I have 5 icons that I need to be horizontal and evenly centered on a page. I have tried to use the spacers in between icons, but the images are still off-center (because of the total size of the pics). Can anyone help me with a code that will automatically center all images in an entire section?

 

Screen Shot 2021-04-04 at 2.04.09 AM.png

Link to comment
  • Replies 6
  • Views 617
  • Created
  • Last Reply
19 minutes ago, P-Lato said:

I have 5 icons that I need to be horizontal and evenly centered on a page. I have tried to use the spacers in between icons, but the images are still off-center (because of the total size of the pics). Can anyone help me with a code that will automatically center all images in an entire section?

 

Screen Shot 2021-04-04 at 2.04.09 AM.png

It would help with your site url to have a look at

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
11 hours ago, P-Lato said:

patrickpilato.ca, password: 123

In the tools page as well as the solutions page. Thank you!

I saw you make the pig icon longer than the other, could you resize it to make sure it's col-2 instead of 4?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
1 hour ago, P-Lato said:

I think i made then the same size, can you help? 

Try this, also make the last image block into col-2 and add 2 spacer at the end and begin of the row with col-1 to make the row fit with all 12 columns, would you?image.thumb.png.7ebb5271ee3d367c1c083852de5a0bec.png

section[data-section-id="60665fa5c883c56b5d5d2782"] {
  align-items: center !important;
}
section[data-section-id="60665fa5c883c56b5d5d2782"] .content-wrapper {
    padding-top: 3vw !important;
    padding-bottom: 3vw !important;
}
section[data-section-id="60665fa5c883c56b5d5d2782"] .image-block {
  margin: 0 auto;
  padding-bottom: 0;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

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