Shopify themes, liquid, logos, and UX
Hi there,
I am currently using the debut theme and the slide show looks great on the desktop version - the shop now is overlaying the images and the toggle buttons at the bottom of the slides are transparent and white. However, on the mobile version it shifts to the bottom and there is an awkward white box around it. How do I make the mobile version look the same as the desktop version?
url: www.winslowsloft.com
Thanks,
Kieron
Please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
@media only screen and (max-width: 749px){
.slideshow__btn {
display: block !important;
max-width: 46%;
min-height: 1.125rem;
line-height: 1.2;
margin: 0 auto;
font-size: small;
}
.slideshow__text-content--mobile-active {display: none !important;}
.slideshow {max-height: 35vh !important;}
}
Thanks!
Thank you, but now the button has disappeared completely and the arrows are still in the awkward white box
please remove i provided css code i will send new correct css code.
My shop now button on the desktop version is now top centre instead of middle centre as I wanted it - how do I change this back?
Please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
@media only screen and (min-width: 750px){
.slideshow__text-content.slideshow__text-content--vertical-top {
top: 50% !important;
}
}
This has fixed the desktop version - however, the mobile version still looks like this. How do I get the shop button to overlay the images?
Hey @Winslows_Loft
You can try this code . It might help you at some level.
@media only screen and (max-width: 749px) {
.slideshow__text-wrap--mobile {
top: -6.1rem;
background-color: rgba(0,0,0,.75);
}
.slideshow__btn--mobile {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
min-height: auto;
}
.slideshow__arrows--mobile ~ .slideshow__text-content--mobile {
padding-top: 0;
}
.slideshow__arrows--mobile {
width: 169px;
margin: 0 auto;
background-color: rgba(0,0,0,.4);
}
.slideshow__arrows .slideshow__arrow .icon {
fill: #fff;
}
.slideshow__arrows .slick-dots li a::before {
color: rgba(255,255,255,.5);
}
.slideshow__arrows--mobile .slick-dots li.slick-active a::before, .slideshow__arrows--mobile .slick-dots li.slick-active button::before {
color: #fff;
}
}
Almost hahaha
The desktop version of the slideshow has now also become really small?
Hii, @Winslows_Loft
Paste this code on top of the theme.scss file.
@media only screen and (max-width: 749px){
.slideshow__text-wrap.slideshow__text-wrap--mobile {
margin-top: 25px !important;
}
}
Thank You.
Nothing has changed with this code
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