How can I enlarge slideshow buttons on Beyond theme for mobile view?

Store Design
1

Hello!

I have created a website where i made 2 ‘‘buttons’’ from a ‘‘slideshow’’ section. On desktop the buttons look very nice, but on mobile they are quite small. Is a coding option available to increase the size of these 2 buttons(look at the picture for desktop/laptop button)

IMG_1995.PNG
IMG_1995.PNG1242×2688 370 KB

Kind regards,

Julian

2

Hi and welcome!

Could you post a link to your store and I shall take a look for you :slightly_smiling_face:

3

https://easycomputershop.nl/

thanks!

4

No problem!

add these to the botom of your theme–async.css file:

@media only screen and (max-width: 600px) {

transition-root.carousel--x-container {
    left: 0px !important;
    width: 100% !important;
}

.carousel--y-container {
    margin: 0 !important;
}
}

This should make them bigger on mobile for you :slightly_smiling_face:

5

It semi-worked!

The buttons are a little bigger but the listing below have gotten smaller, something you can do about that as well?

IMG_1998.PNG
IMG_1998.PNG1242×2688 351 KB

IMG_1996.PNG
IMG_1996.PNG1242×2688 367 KB

6

Add this at the bottom of the same file for me:

[data-section-id="template--15492866080955__featured-collection-grid"] .carousel--x-container {
    width: calc(100% * 2 - 128px) !important;
}

As well as the previous 2 pieces of code :slightly_smiling_face:

7

Almost… now the listing is very big on desktop. Sorry for giving you a hard time!

2022-07-08 16_28_43-Window.png
2022-07-08 16_28_43-Window.png2511×1018 432 KB

8

No problem!

@media only screen and (max-width: 600px) {

transition-root.carousel--x-container {
    left: 0px !important;
    width: 100% !important;
}

.carousel--y-container {
    margin: 0 !important;
}
[data-section-id="template--15492866080955__featured-collection-grid"] .carousel--x-container {
    width: calc(100% * 2 - 128px) !important;
}
}

Should be like this at the bottom of your file :slightly_smiling_face:

9

Perfect! Thanks!

10

You’re very welcome!

Take a moment to read through my signature below, appreciate it a lot :heart: