Jump to content

Centre align thumbnails within summary block/stack on mobile

Recommended Posts

Site URL: https://www.116pallmall.com/nash-1

Hello, would really appreciate help please!

I am trying to centre align these capacity icons within this summary block. I have brought the images in at 100x100px and they pixelate. I have tried making them smaller using this code:

.summary-thumbnail,
.summary-thumbnail img {
  width: auto !important; height: 75px !important;
}

They do reduce in size but left aligned and with lots of space between the bottom and the copy below and the overall height of the block is bumped up. How do I fix this please to the icons appear small (around 75px) and centre aligned with the text below.

Second issue is on mobile, how do I get the block to stack so it reads icon, text below, icon, text below etc.

 

THANK YOU!

Link to comment
  • Replies 5
  • Views 556
  • Created
  • Last Reply

Top Posters In This Topic

Have you figured out? It seems fine at the moment

image.thumb.png.6be0de69630c2772dad24c9d207b8a5f.png

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

Hello, thanks for your reply! It is this section that needs fixed. The icons should be much smaller but when I make smaller, the align to the left, rather than centre aligned with the text below 😞 See screenshots. I am currently using this code:

 

#block-yui_3_17_2_1_1639493858117_14721 
{ 
.summary-title { 
 font-size: 16px  ! important;
color: #4f6784; margin: 0;}
 .summary-thumbnail,
.summary-thumbnail img {
  width: 75px !important; height: 75px !important;
}
.summary-excerpt { 
 font-weight: bold  ! important;
color: #4f6784;
}
background-color:#ededed;
}

And on mobile the icons don't stack on top of each other so they read: icon, text, icon, text 

Any ideas please? Thank you!

nash-1.PNG

nash-2.PNG

Link to comment
On 12/17/2021 at 4:50 PM, victoriaosborne said:

Hello, thanks for your reply! It is this section that needs fixed. The icons should be much smaller but when I make smaller, the align to the left, rather than centre aligned with the text below 😞 See screenshots. I am currently using this code:

 

#block-yui_3_17_2_1_1639493858117_14721 
{ 
.summary-title { 
 font-size: 16px  ! important;
color: #4f6784; margin: 0;}
 .summary-thumbnail,
.summary-thumbnail img {
  width: 75px !important; height: 75px !important;
}
.summary-excerpt { 
 font-weight: bold  ! important;
color: #4f6784;
}
background-color:#ededed;
}

And on mobile the icons don't stack on top of each other so they read: icon, text, icon, text 

Any ideas please? Thank you!

nash-1.PNG

nash-2.PNG

It looks centered & small here. You want to resize icons on mobile?

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.