Amazon Block Alignment Issue

Site URL: https://www.helgaspetgrooming.com/our-tools

Hey all,

Any of you happen to have any ideas on how I can make these products all line up so they are all the same height?

Site: https://www.helgaspetgrooming.com/our-tools

Password: brady

The Amazon Block does not allow you to resize the image nor the block height.

I called customer service and they said the size is based on the Amazon image for the product and referred me here for additional help.

Seems like the SquareSpace coders could implement a resizing image slider option or a handle at the base of the block to resize it up.

It pains me that the only part of my site that looks ugly is this page.

Any help to make this look cleaner would be greatly appreciated.

Thanks in advance.

Kev

I think you should change to 3-4 products/row

or

increase width, reduce font size, button size... Add to Home > design > Custom CSS

/* product name */
div#page-section-5e3495020b03e63e47d317e6 .product-title {
    font-size: 16px;
}
/* button style */
div#page-section-5e3495020b03e63e47d317e6 a.buy-button input {
    font-size: 12px !important;
    padding: 10px;
}
/* limit image height */
div#page-section-5e3495020b03e63e47d317e6 .image-container {
    max-height: 130px;
    overflow: hidden;
}
/* equal title height */
@media screen and (min-width:768px) {
div#page-section-5e3495020b03e63e47d317e6 .product-title {
    min-height: 130px;
}
}
/* increase products container width */
[data-section-id="5e3495020b03e63e47d317e6"] .content {
    width: 90% !important;
}

Tuan, Can you explain how and where to put this code? And is it something I can use for my page as well as I am trying to create a recommended products page on my website.

Each site needs different code. Can you share link to page where you insert amazon block?

On 9/16/2020 at 7:35 AM, BrigitteB said:

Tuan, Can you explain how and where to put this code? And is it something I can use for my page as well as I am trying to create a recommended products page on my website.

@tuanphan Hi! Can you help me? The code you provided used to work, but the last few days has stopped working. This is the page, and here is the code I was using:
https://www.simplegoldlife.com/bean-protocol-start-here

section[data-section-id="608885cb5e88124e4067453e"] .image-container, section[data-section-id="60b973f9292bd73bd9666962"] .image-container, section[data-section-id="60ca1f2ad81bff44bef3f284"] .image-container, section[data-section-id="60ca2a9733546628e29f0f38"] .image-container, section[data-section-id="6089706547e53c49c7bc53b1"] .image-container, section[data-section-id="60888642bf871255729b3337"] .img-container, {
    min-height: 223px!important;
    overflow: hidden!important;
}
section[data-section-id="608885cb5e88124e4067453e"] .image-container, section[data-section-id="60b973f9292bd73bd9666962"] .image-container, section[data-section-id="60ca1f2ad81bff44bef3f284"] .image-container, section[data-section-id="60ca2a9733546628e29f0f38"] .image-container, section[data-section-id="6089706547e53c49c7bc53b1"] .image-container, section[data-section-id="60888642bf871255729b3337"] .img-container,{
    max-height: 223px!important;
    overflow: hidden!important;
}

section[data-section-id="608885cb5e88124e4067453e"] .product-block .image-container img, section[data-section-id="60b973f9292bd73bd9666962"] .product-block .image-container img, section[data-section-id="60ca1f2ad81bff44bef3f284"] .product-block .image-container img, section[data-section-id="60ca2a9733546628e29f0f38"] .product-block .image-container img, section[data-section-id="6089706547e53c49c7bc53b1"] .product-block .image-container img, section[data-section-id="60888642bf871255729b3337"] .product-block .image-container img,{
    width: 100%;
    max-width: 100%!important;
    max-height: 223px !important;
  min-height: 223px !important;
}
 

8 hours ago, yazzi said:

@tuanphan Hi! Can you help me? The code you provided used to work, but the last few days has stopped working. This is the page, and here is the code I was using:
https://www.simplegoldlife.com/bean-protocol-start-here

section[data-section-id="608885cb5e88124e4067453e"] .image-container, section[data-section-id="60b973f9292bd73bd9666962"] .image-container, section[data-section-id="60ca1f2ad81bff44bef3f284"] .image-container, section[data-section-id="60ca2a9733546628e29f0f38"] .image-container, section[data-section-id="6089706547e53c49c7bc53b1"] .image-container, section[data-section-id="60888642bf871255729b3337"] .img-container, {
    min-height: 223px!important;
    overflow: hidden!important;
}
section[data-section-id="608885cb5e88124e4067453e"] .image-container, section[data-section-id="60b973f9292bd73bd9666962"] .image-container, section[data-section-id="60ca1f2ad81bff44bef3f284"] .image-container, section[data-section-id="60ca2a9733546628e29f0f38"] .image-container, section[data-section-id="6089706547e53c49c7bc53b1"] .image-container, section[data-section-id="60888642bf871255729b3337"] .img-container,{
    max-height: 223px!important;
    overflow: hidden!important;
}

section[data-section-id="608885cb5e88124e4067453e"] .product-block .image-container img, section[data-section-id="60b973f9292bd73bd9666962"] .product-block .image-container img, section[data-section-id="60ca1f2ad81bff44bef3f284"] .product-block .image-container img, section[data-section-id="60ca2a9733546628e29f0f38"] .product-block .image-container img, section[data-section-id="6089706547e53c49c7bc53b1"] .product-block .image-container img, section[data-section-id="60888642bf871255729b3337"] .product-block .image-container img,{
    width: 100%;
    max-width: 100%!important;
    max-height: 223px !important;
  min-height: 223px !important;
}
 

You mean Line up buttons "Buy On Amazon"?

@tuanphan No, I mean the Amazon Product Image Sizes. I would like them to be uniform heights and widths. Thanks!

I am actually curious about how to make the Amazon product image uniform height. Did anyone find a solution?

@tuanphan I will email you - looking for help with this issue as well for my site! 

I have the same issue. Has anyone found a solution?

1 hour ago, avanti said:

I have the same issue. Has anyone found a solution?

This seems to be working for me so far... 

section[data-section-id="INSERT"]{.product-block .image-container img {
   object-fit: contain;
   height: 250px; 
  }
}

On 2/27/2023 at 10:42 PM, avanti said:

This seems to be working for me so far... 

section[data-section-id="INSERT"]{.product-block .image-container img {
   object-fit: contain;
   height: 250px; 
  }
}

@avanti thanks! Where did you put this code?

21 hours ago, supasmilez said:

@avanti thanks! Where did you put this code?

Design > Custom CSS

On 4/19/2023 at 10:23 AM, supasmilez said:

@avanti thanks! Where did you put this code?

Hi @supasmilez, I put in in CSS