Summary Carousel mobile view

I used custom code to create arrows on my testimonials summary carousel. 

Here is the code I used:

@media screen and (max-width: 767px) { .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager { bottom: -18% !important;}}.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager { float: none; width: auto; position: absolute; bottom: -5%;} .sqs-gallery-design-carousel .sqs-gallery-controls .next::before { background-color: #3c9; color: #fff; padding: 3px;} .sqs-gallery-design-carousel .sqs-gallery-controls .previous::before { background-color: #3c9; color: #fff; padding: 3px;}

In the mobile view of the website the arrows move down very far, is there any way to fix this? I attached photos you can see what I mean.

thank you!

Hi. Can you share link to page in screenshot? We can check easier

Hi there, I need help with the same issue please.

Can you help me make the summary carousel block mobile and tablet friendly? 

It is on the home page

https://cello-opossum-2bsn.squarespace.com 

Password: 123

Should look like:

13 hours ago, P-Lato said:

Hi there, I need help with the same issue please.

Can you help me make the summary carousel block mobile and tablet friendly? 

It is on the home page

https://cello-opossum-2bsn.squarespace.com 

Password: 123

 

 

Should look like:

Hi. Can you disable autoplay? We can check easier

Hi Tuanphan thanks for responding. I just disabled autoplay for you!

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
#block-yui_3_17_2_1_1620824737387_16698 .summary-excerpt p {
    padding: 10px !important;
}
#block-yui_3_17_2_1_1620824737387_16698 .summary-item-list img {
    width: 100% !important;
    height: auto !important;
}
#block-yui_3_17_2_1_1620824737387_16698 .summary-thumbnail {
    padding-top: 0 !important;
    right: unset !important;
}
#block-yui_3_17_2_1_1620824737387_16698 .summary-thumbnail-outer-container {
    width: 50% !important;
    height: auto !important;
}
div#block-yui_3_17_2_1_1620824737387_16698 .summary-content.sqs-gallery-meta-container {
    padding-top: 70px;
}
div#block-yui_3_17_2_1_1620824737387_16698 .summary-content.sqs-gallery-meta-container * {
    text-align: center;
}
.summary-block-wrapper.sqs-gallery-design-carousel {
    max-height: unset;
}
}