Staked view on Mobile view

Hi there,

I have a webshop on art and I don't like the way my product gallery looks like on mobile.

The STACKED view is nice on the desktop version but on mobile why it show as slider?

Looking for a CODE to show STACKED view on mobile aswell

Can anyone please help me with this code? 

Thank you so much

Add to Website Tools (under Not Linked) > Custom CSS. If it doesn't work, please share link to a product, we can check easier

@media screen and (min-width:768px) {
.tweak-product-basic-item-gallery-design-stacked .ProductItem-gallery-slides-item {
    margin-bottom: 0px !important;
}
.tweak-products-width-full .products.collection-content-wrapper {
    padding-top: 0 !important;
    padding-left: 0 !important;
}
nav.ProductItem-nav {
    position: absolute;
    left: 3vw;
    z-index: 99999;
    background-color: white;
    padding: 0 !important;
}}

Hi, thank you to write me back and sorry for my late  replay. I did youse your CSS but seems not affect the mobile design (check the screen shoot)

Here the URL: https://www.clarestokolosa.com/shop/p/poinsettia-with-holly

Thank you

Clare

Remove code I sent & use this new code

@media screen and (min-width:768px) {
.tweak-product-basic-item-click-action-lightbox .ProductItem-gallery-slides-item {
    position: static !important;
    height: auto !important;
    visibility: visible !important;
}
.tweak-product-basic-item-gallery-aspect-ratio-169-widescreen .ProductItem-gallery-slides:before {
    padding: 0 !important;
}}

Hi, thank you for your help, unfortunately is not seems to work thhis CSS ...

you  can check yourself ... on mobiles shopping items view is not staked but still slider what thhe code seems to do it just zoom the slider image content so I have to remove it 😞

I tested second code on my site before sending the code.

Can you keep code in CSS box? I can check again easier

Hi, ok I have paste again the code in the box, check when you have time ..

Thank you

Thank you so much this new code made the job done!

Great Job. Tuanphan!

On 1/10/2024 at 5:48 AM, tuanphan said:

You can use this new code

@media screen and (max-width:767px) {
.tweak-product-basic-item-click-action-lightbox .ProductItem-gallery-slides-item {
    position: static !important;
    height: auto !important;
    visibility: visible !important;
}
.tweak-product-basic-item-gallery-aspect-ratio-169-widescreen .ProductItem-gallery-slides:before {
    padding: 0 !important;
}}

 

Hi! I've used these two codes, but unfortunately none of them work for my site https://www.veneramor.com/shop/p/illuminated-wonders

Could you please help me?

On 1/20/2024 at 3:40 PM, Venera said:

Hi! I've used these two codes, but unfortunately none of them work for my site https://www.veneramor.com/shop/p/illuminated-wonders

Could you please help me?

You can use this new code

@media screen and (max-width:767px) {
.ProductItem-gallery-slides-item {
    position: static !important;
    height: auto !important;
    visibility: visible !important;
}
.ProductItem-gallery-slides:before {
    padding: 0 !important;
}}

1 hour ago, tuanphan said:

You can use this new code

@media screen and (max-width:767px) {
.ProductItem-gallery-slides-item {
    position: static !important;
    height: auto !important;
    visibility: visible !important;
}
.ProductItem-gallery-slides:before {
    padding: 0 !important;
}}

 

Perfect! Thank you so much! 🙂

Hello,

@tuanphan The code is great, but It only shows the first 2 images stacked and then the others weirdly slide in when scrolling to the left or right. also spacing underneath is way too much. Can you help to solve this please? Many thanks!!!

On 4/16/2024 at 3:32 AM, MMesanfe said:

Hello,

 

@tuanphan The code is great, but It only shows the first 2 images stacked and then the others weirdly slide in when scrolling to the left or right. also spacing underneath is way too much. Can you help to solve this please? Many thanks!!!

 

Remove the code & use this new code

@media screen and (max-width:767px) {
.ProductItem-gallery-slides-item {
    position: static !important;
    height: auto !important;
    visibility: visible !important;
    display: block !important;
    animation: unset !important;
}
.ProductItem-gallery-slides:before {
    padding: 0 !important;
}}

On 4/18/2024 at 10:58 AM, tuanphan said:

Remove the code & use this new code

@media screen and (max-width:767px) {
.ProductItem-gallery-slides-item {
    position: static !important;
    height: auto !important;
    visibility: visible !important;
    display: block !important;
    animation: unset !important;
}
.ProductItem-gallery-slides:before {
    padding: 0 !important;
}}

 

OMG @tuanphan you are the best! Is there a possibility to put the description/price etc before the images? Thank yoouuuu!

On 4/25/2024 at 9:32 PM, MMesanfe said:

OMG @tuanphan you are the best! Is there a possibility to put the description/price etc before the images? Thank yoouuuu!

Currently image under button. You want to move image under price, above quantity or?

https://www.atelier365.be/shop/p/8bo3i7sdrc5xvhq9juyjzywzo79dlt