Minimize space only in mobile version

Solved

Minimize space only in mobile version

NikosBat
Excursionist
239 0 38

Hello guys, how can I minimize the space here (only in mobile version) desktop version seems to look good.

 

Bildschirmfoto 2024-12-26 um 13.37.49.png

Accepted Solution (1)

DaisyVo
Shopify Partner
2560 319 369

This is an accepted solution.

Hi @NikosBat 

 

I hope you are well. You can follow our instructions below:
Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

 

Here is the code for Step 3:

 

 

@media screen and (max-width: 768px){
ul.product__media-list {
    margin-bottom: -20px !important;
    margin-top: -40px !important;
}
}

 

 

 

image (18).png


Please let me know if it works. Thank you!

 

Best,
Daisy - Avada Support Team.

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

View solution in original post

Replies 3 (3)

DaisyVo
Shopify Partner
2560 319 369

This is an accepted solution.

Hi @NikosBat 

 

I hope you are well. You can follow our instructions below:
Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

 

Here is the code for Step 3:

 

 

@media screen and (max-width: 768px){
ul.product__media-list {
    margin-bottom: -20px !important;
    margin-top: -40px !important;
}
}

 

 

 

image (18).png


Please let me know if it works. Thank you!

 

Best,
Daisy - Avada Support Team.

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
NikosBat
Excursionist
239 0 38

Thank you very much DaisyVo that solved my problem

Moeed
Shopify Partner
6577 1783 2162

Hey @NikosBat 

 

Follow these Steps:

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

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.thumbnail-slider .thumbnail-list.slider {
    padding-top: 0 !important;
    margin-top: -25px !important;
}
product-info#MainProduct-template--22800324755788__main {
    padding-top: 0 !important;
}
}
</style>

RESULT:

Moeed_0-1735217464344.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications