Full screen slideshow

LEUNGGUOTAO
Excursionist
29 0 4

Hi there

I would like to make my first slideshow as full screen on mobile edition . It's full scren slideshow in my desktop edition  but it didn't work on mobile .

Here is what I am looking for:

1、Full sccreen slides show on mobile.

2、Button would be inside the sliesshow .

I really appreciate your helping  !

My url: sales.bellissimochina.com

 

LEUNGGUOTAO_0-1627523627854.png

LEUNGGUOTAO_2-1627524242758.png

 

 

 

0 Likes
Pallavi
Shopify Expert
2366 396 513

Hello There,

1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme-styles-responsive.scss.css and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
div#shopify-section-slideshow section#slideshow-slideshow .container-fluid {
padding-left: 0;
padding-right: 0;
}
div#shopify-section-slideshow section#slideshow-slideshow .container-fluid .slide-content.abs_center {
padding: 25px 20px 30px;
}
div#shopify-section-slideshow section#slideshow-slideshow .container-fluid .no-padd.col-12 {
padding-left: 0;
padding-right: 0;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
LEUNGGUOTAO
Excursionist
29 0 4

Hello I tried the code you gave me ,but it didn't work . Is there any problem ?

Thanks !

LEUNGGUOTAO_0-1627539076958.png

 

0 Likes

@LEUNGGUOTAO,

The buttons inside the slideshow would be a more complex issue, however the fullscreen on mobile can be fixed like this:

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

 

<style>
@media (max-width: 749px){
       [id] .home-slideshow > [class*='container']{
        padding-left: 0 !important;
        padding-right:  0 !important;
    }
}
</style>

 




Please let me know whether it works.

Kind regards,
Diego

◦ Slideshow section not looking good? Try the Slideshow (PRO) section. No apps required.
◦ Product page images slider for free themes (w/ 20+ customization options): Minimal | Debut | Brooklyn | Supply
◦ If my answer helps you please click on like and Accept as solution!
0 Likes
LEUNGGUOTAO
Excursionist
29 0 4

Hi Diego

I found theme.liquid file and add the code you gave me above </body> . But it didn't work 

LEUNGGUOTAO_0-1627541405975.png

 

Best regard !

0 Likes

@LEUNGGUOTAO 

Are you pasting it into the correct theme? The code is not being loaded on your website, so you're probably either saving it into a different theme or you didn't click the "save" button on the top right.

◦ Slideshow section not looking good? Try the Slideshow (PRO) section. No apps required.
◦ Product page images slider for free themes (w/ 20+ customization options): Minimal | Debut | Brooklyn | Supply
◦ If my answer helps you please click on like and Accept as solution!
0 Likes
LEUNGGUOTAO
Excursionist
29 0 4

I have double check weather I save the file or use the correct theme .It didn't work . I don't know why .

THanks!

0 Likes
LEUNGGUOTAO
Excursionist
29 0 4

Hi Diego

How are you ? I have tried serveal times , but I can't figure out this issue .Coud you tell me is there another way to make it happen? 

I really appreciate that . Thanks !

0 Likes