How can I get my slideshow to display in full screen on mobile?

Technical Q&A
1

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_0-1627523627854.png326×451 53.8 KB

LEUNGGUOTAO_2-1627524242758.png
LEUNGGUOTAO_2-1627524242758.png566×1036 372 KB

2

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;
}
}
3

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

Thanks !

LEUNGGUOTAO_0-1627539076958.png
LEUNGGUOTAO_0-1627539076958.png1647×831 48.3 KB

4

@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 (press CTRL + F or command + F on Mac)
  3. paste this code right above the tag:

Please let me know whether it works.

Kind regards,
Diego

5

Hi Diego

I found theme.liquid file and add the code you gave me above . But it didn’t work

LEUNGGUOTAO_0-1627541405975.png
LEUNGGUOTAO_0-1627541405975.png739×610 8.44 KB

Best regard ！

6

@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.

7

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

THanks!

8

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 !