Solved

Studio Theme White Container responsive change

luke01
Excursionist
34 0 4

Hi all, I am working with the studio theme. I want to keep the white container overlaying on the image the same way it does on desktop. I want the white container to overlay the image on desktop and mobile. How can I make the white container in the slideshow area not change in the mobile version? 


The store is not published yet.

Site is: https://b85dcc.myshopify.com Password is rawbla

 

Screenshot 2024-04-09 at 5.44.25 PM.pngScreenshot 2024-04-09 at 5.44.47 PM.png

Accepted Solution (1)

PageFly-Richard
Shopify Partner
4322 980 1639

This is an accepted solution.

Hi @luke01 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media (max-width: 767px){
.slideshow__slide.grid__item.slider__slide {
    position: relative;
}
.slideshow__text-wrapper.banner__content {
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    height: 100%;
}
.slideshow__text-wrapper.banner__content > div {
    background: rgba(255, 255, 255, 0.5);
}
}
</style>

PageFlyRichard_0-1712710152246.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Reply 1 (1)

PageFly-Richard
Shopify Partner
4322 980 1639

This is an accepted solution.

Hi @luke01 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media (max-width: 767px){
.slideshow__slide.grid__item.slider__slide {
    position: relative;
}
.slideshow__text-wrapper.banner__content {
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    height: 100%;
}
.slideshow__text-wrapper.banner__content > div {
    background: rgba(255, 255, 255, 0.5);
}
}
</style>

PageFlyRichard_0-1712710152246.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.