Custom Coding to resize image blocks on a specific page

Site URL: http://www.stevegallagher.com/

Hi Guys,

I was wondering if someone can help me out....

I'm working new page and I'm having trouble trying to scaling the thumbnails to the correct size. I would like them to be the size of the blue box but as default the page has the grey box set to a specific size. Also to adjust the padding around it.

I'm using the New Page > Images> Horizontal Masonry.

How can I write a code and place it, just for this page to turn the grey box's into the blue size? (there will be just 3 images per row)
Blue box image size is H: 181 pix  /  W: 322 pix.  If that helps

Should the code go into the page in the advance section?

See below: Thanks in advance

What is the page with the different image size? I checked all your navigation but still not found it yet

Hi Bangank,

It's not a live page. I've mage the page live now.  I'm just trying to work out how to write the code for it and where to place it.

Thanks

3 minutes ago, SteveG03 said:

Hi Bangank,

It's not a live page. I've mage the page live now.  I'm just trying to work out how to write the code for it and where to place it.

Thanks

Here is my trick, this way it can be applied on one page only instead of the whole site

1. You need to add below script on your page custom code 

2. Since you got your image dimension, use this formula

ratio = height / width --> 181/322 ~ 56.2%

3. Replace the value in this snippet

<style>
	.sqs-block-image .sqs-empty .sqs-image-content {
      padding-bottom: 56.2% !important;
    }
</style>

Hi Bangank,

Just wanted to say thanks for the above!