centre-align product block in shop

Hi,I only have one product block, and would prefer it to be centre-aligned,Link: anxietyempire.com/shopThanks for any tips!

@tuanphan you're a star, thank-you :)

Hmm — I'm having the same problem, and @tuanphan (who, let's be clear, really is a star!)'s answer isn't working for me. 

Could it be because I'm using SS 7.1?

If anyone has a notion on how to center-align a single product, please do share!

5 hours ago, brandonhendrickson said:

Hmm — I'm having the same problem, and @tuanphan (who, let's be clear, really is a star!)'s answer isn't working for me. 

Could it be because I'm using SS 7.1?

If anyone has a notion on how to center-align a single product, please do share!

Yes. It seems SS 7.1 use different class name. Can you share link to product page?

On 5/17/2020 at 3:03 PM, tuanphan said:

Yes. It seems SS 7.1 use different class name. Can you share link to product page?

@tuanphan, did you ever figure out the proper class name to fix this on 7.1? I've been trying everything and I can't get the single product thumbnail in the grid container to center. (it's the only product for sale) Thanks!!!

On 9/11/2020 at 1:55 AM, BrianLehrer said:

@tuanphan, did you ever figure out the proper class name to fix this on 7.1? I've been trying everything and I can't get the single product thumbnail in the grid container to center. (it's the only product for sale) Thanks!!!

Can you share link? We can check easier.

Hi! I'm still looking for a proper way to align a product to the center of the page. I've tried several code blocks from answers on the internet, but it used to deform the scale of the block. Now it's not even working anymore.

If anyone can help me with this it would be deeply appreciated. 

https://www.fuelyourbody.net/coach-personal

pass: body2020

On 12/1/2020 at 2:29 AM, 3ACOM said:

Hi! I'm still looking for a proper way to align a product to the center of the page. I've tried several code blocks from answers on the internet, but it used to deform the scale of the block. Now it's not even working anymore.

If anyone can help me with this it would be deeply appreciated. 

https://www.fuelyourbody.net/coach-personal

pass: body2020

Add to Home > Design > Custom CSS

.list-grid {
    justify-content: center;
    display: flex !important;
}

Hi Tuan,

I tried to use the code and it worked however the image is tiny now in the shop.

here's a link to page: https://burgundy-paddlefish-hs2d.squarespace.com/shop

password: wildyeast

Is there a way to get the image to medium size?

On 3/16/2021 at 2:36 AM, ashantawines said:

Hi Tuan,

 

I tried to use the code and it worked however the image is tiny now in the shop.

here's a link to page: https://burgundy-paddlefish-hs2d.squarespace.com/shop

password: wildyeast

Is there a way to get the image to medium size?

Add to Design > Custom CSS

.list-grid {
    justify-content: center;
    display: flex !important;
}

@tuanphan - I'm trying to do this for 4 images on www.greendroptalk.com/hotline

On 3/29/2021 at 11:44 PM, huypham said:

@tuanphan - I'm trying to do this for 4 images on www.greendroptalk.com/hotline

Hi. It looks center here?

In mobile it stacks one on top of the other - Trying to get it to be side by side in mobile @tuanphan

On 4/1/2021 at 1:09 AM, huypham said:

In mobile it stacks one on top of the other - Trying to get it to be side by side in mobile @tuanphan

Hi. It looks like you solved this?

On tablet, it looks ugly. You can add this to Design > Custom CSS

/* Tablet pricing tables */
@media screen and (max-width:991px) and (min-width:768px) {
[data-section-id="60523d6bbab3017fc9714817"] .content {
    width: 90% !important;
}
}

Hi - I'm trying to do what the first person asked - centering a single product. The CSS you provided does center the object but it makes it extremely small. Any other solves?

On 4/13/2021 at 6:48 AM, Rudybro said:

Hi - I'm trying to do what the first person asked - centering a single product. The CSS you provided does center the object but it makes it extremely small. Any other solves?

Can you share link to page where you have problem? We can check again easier

On 3/23/2021 at 8:25 AM, tuanphan said:

Add to Design > Custom CSS

.list-grid {
    justify-content: center;
    display: flex !important;
}

 

Did this work for you, @Rudybro? I'm trying on my site, and it is making my thumbnail SUPER tiny. 

@tuanphan also tagging you here since you're the expert 🙂 thanks for all of your help on this thread!

On 5/4/2021 at 7:38 AM, meemscakes said:

@tuanphan also tagging you here since you're the expert 🙂 thanks for all of your help on this thread!

Can you share link to your site? We can check easier

Also having a problem, the code worked in making them center aligned but now they are all different sizes.. 

Site is: https://boffix.squarespace.com/

On 7/8/2021 at 9:25 PM, Boffix said:

Also having a problem, the code worked in making them center aligned but now they are all different sizes.. 

Site is: https://boffix.squarespace.com/

Add to Design > Custom CSS

.list-grid {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
}

On 12/3/2020 at 7:24 PM, tuanphan said:

Add to Home > Design > Custom CSS

.list-grid {
    justify-content: center;
    display: flex !important;
}

 

@tuanphan Hi, your code worked.

is there a possible way to align the single product to the center without flexing it? Also, it affects all my store pages because i have like 7 store pages. i want to just align a single store page.  thanks in advance for your help

On 8/13/2021 at 4:28 PM, joshyrivers said:

@tuanphan Hi, your code worked.

is there a possible way to align the single product to the center without flexing it? Also, it affects all my store pages because i have like 7 store pages. i want to just align a single store page.  thanks in advance for your help

Add to your screenshot page Header

<style>
  .list-grid {
    justify-content: center;
    display: flex !important;
}
</style>

On 8/15/2021 at 5:55 AM, tuanphan said:

Add to your screenshot page Header

<style>
  .list-grid {
    justify-content: center;
    display: flex !important;
}
</style>

 

is there a possible way to not flex the product when you hover the mouse on the image? same on the first image attached below. the product becomes huge when i hover the mouse into it