Photos bit smaller

[Disci]

Hi!

This is regarding the view on the phone!!

I want the photos on the product pages to be a bit smaller, so there is a white space on both sides left and right. Just like the photos on the landing page on the phone.

Can someone help me? Thanks in advance!

discinetherlands.com
password: joepjoep

[theycallmemakka]

Hi @Disci 

I have written custom CSS for this solution. Please follow below steps and let me know your feedback.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above tag </head>

<style>
@media screen and (max-width: 1000px) {
    .product-gallery__carousel {
        padding-left: max(var(--container-gutter),50% - var(--container-max-width) / 2);
        padding-right: max(var(--container-gutter),50% - var(--container-max-width) / 2);
    }
}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[Disci]

Nice! can you make the white spaces a bit less wide? just like the white spaces on the landing pace

[theycallmemakka · Accepted solution]

Hi @Disci ,

I have updated the css to decrease the white space. 

Please follow below steps and let me know your feedback.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above tag </head>

<style>
@media screen and (max-width: 1000px) {
    .product-gallery__carousel {
        padding-left: calc(max(var(--container-gutter),50% - var(--container-max-width) / 2) - .625rem);
        padding-right: calc(max(var(--container-gutter),50% - var(--container-max-width) / 2) - .625rem);
    }
}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka