Shopify themes, liquid, logos, and UX
Hy,
How to make the bottom part of this kind of gallery aligned? the right column with 3 images doesn't reach the big image on the left basement
Regards
Solved! Go to the solution
This is an accepted solution.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
This is an accepted solution.
yes, please confirm this
This is an accepted solution.
i mean please check my attachment its proper so i will give you that code
This is an accepted solution.
yes, please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/stylesheet.css ->paste below code at the bottom of the file.
.promo-1521604513411-2 .box-ratio {
padding-bottom: 107% !important;
position: relative;
}
.promo-1521604513411-2 img {
position: absolute !important;
top: 0;
height: 100%;
}
This is an accepted solution.
oh sorry for that can you please send issue images?
This is an accepted solution.
We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?
This is an accepted solution.
ok same issue other device?
This is an accepted solution.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
This is an accepted solution.
yes, please confirm this
Sorry, what I have to confirm?
This is an accepted solution.
i mean please check my attachment its proper so i will give you that code
Yes, Is perfect. Tnx!
This is an accepted solution.
yes, please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/stylesheet.css ->paste below code at the bottom of the file.
.promo-1521604513411-2 .box-ratio {
padding-bottom: 107% !important;
position: relative;
}
.promo-1521604513411-2 img {
position: absolute !important;
top: 0;
height: 100%;
}
Hy,
I'm very sorry to re-open the ticket, but we've the "inverse" problem in mobile. The rule above is perfect for Desktop versiuon, but not for mobile. Take a look at attachment, please
This is an accepted solution.
oh sorry for that can you please send issue images?
This is an accepted solution.
Yes, sorry!
This is an accepted solution.
We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?
Chrome mobile browser on Huawei P20 phone and Microsoft Edge "mobile version" on windows 10 Pro
This is an accepted solution.
ok same issue other device?
Hy @KetanKumar ,
As we can see, with every device (desktop, tablet or mobile) there is a "swing" of padding ogf that specific block: a percentage ogf 109% seems to be fine for desktop from 17" (
.promo-1521604513411-2 .box-ratio {
padding-bottom: 109% !important;
position: relative;
}
.promo-1521604513411-2 img {
position: absolute !important;
top: 0;
height: 100%;
})
But under that resolution the rule doesn't works as well. We cannot understand whay only that part of design works as bad. May we need an adapting rule to fix that?
Regards
oh sorry for late here
but how can i check now your store url doesn't work can you please send again
Hy, @KetanKumar
Hope you can help me again: we've changed the config of homepage fotos, and we've got the same problem, but with another module. May you help us?
Regards
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024