Resize custom slideshow images for Debut theme (custom HTML)

Store Design
1

Hi, I would like to ask how to resize images for my slideshow for mobile! I am using custom HTML for my slideshow but it seems to me that some codes do not work in Shopify but works in other platforms such as VS Code!

This is the current desktop display which I cld achieve with my own code:

joeyong_1-1628226317501.png
joeyong_1-1628226317501.png1793×498 1.16 MB

This the example of mobile display but i want to make my image smaller so people do not need to scroll too much and at the smae time can scroll horizontally but I can’t seem to do it due to restrictions Shopify has on some CSS codes!

joeyong_0-1628226175383.png
joeyong_0-1628226175383.png524×647 294 KB

This is my shopify website link: gamingesper.myshopify.com

Is it possible to solve this?

(I will share the HTML code thru email)

2

yes, of course, it is possible to solve it.

3

use mobile size images for mobile view and add it in the media query. To make it responsive.

Thank you.

4

Yes I already did that but the code does not seem to work! It seems that the images suddenly disappear if I change the width and height!

I can send you my code if it is possible!

5

or share me your zip file.

6

This is the code!

7 
@media only screen and (max-width: 749px) {
    .headertitle {
    font-size: 31px;
    width: auto !important%
}

please remove the extra with of the images.

use this in place of other media query.

1 Like
8

Thank you! solved it! In addition, do you know how to make the slideshow scrollable horizontally for mobile?

1 Like
9

ok i will suggest you the link to make it horizontal.

10

Yes, I wld want to make the mobile users to just swipe instead of tapping the arrow buttons to change the slides. Thank you so much!

11

Would it be possible if you were to send me through email instead?

My email: esperlights@gmail.com