Centre align thumbnails within summary block/stack on mobile

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!

Have you figured out? It seems fine at the moment

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!

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!

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

Hello, the second image is how it is currently displaying. The images are left aligned

Also on mobile, they don't stack

On 12/21/2021 at 7:09 PM, victoriaosborne said:

Hello, the second image is how it is currently displaying. The images are left aligned

Also on mobile, they don't stack

Mobile, fine here. You want?