Shopify themes, liquid, logos, and UX
I found the CSS to use to make the box on top of the hero image on the Refresh theme transparent, it looks fine on desktop but on mobile, you can't see the hero text and the button takes up the entire div. I'm having the same issue on another container further down on the homepage where I added CSS to make the text and button container transparent + smaller in width, it causes the same issues on mobile view. How can I correct this?
this is the CSS I used for the hero and banner which look correct on desktop but is causing the text to disappear and the button to stretch on mobile view.
.slideshow__text.banner__box {
background-color: rgba(255, 255, 255, 0) /* Change last value to adjust the opacity */
}
.banner__box {
background-color: rgba(255, 255, 255, 0);
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
width: 80%;
max-width: 600px;
}
https://a7ec6e-bd.myshopify.com/?_ab=0&_fd=0&_sc=1
this is the CSS I used for the hero and banner which look correct on desktop but is causing the text to disappear and the button to stretch on mobile view.
.slideshow__text.banner__box {
background-color: rgba(255, 255, 255, 0) /* Change last value to adjust the opacity */
}
.banner__box {
background-color: rgba(255, 255, 255, 0);
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
width: 80%;
max-width: 600px;
}
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025