Change carousel features individually for mobile/tablet view

Hi,

I am trying to custom code the carousels on our website to still look good in mobile view. I coded the one of the homepage using help from this forum and that looks way better now. However the code doesn't specify which carousel and we have another on the 'process' page which is being affected. 

The code i used for the homepage was:

/* Change width text carousel */
@media only screen and (max-width:767px) {
  .list-item-content__description,
  .list-item-content__title{
    max-width:90% !important;
  }
}
/* Change photo size carousel */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="63849fb9df9a71511819bbb4"] .user-items-list-carousel__media-container {
    width: 70% !important;
}
}

I want to a) Change the above code to target only the homepage carousel

b) change the carousel on the 'process' page to look better, the background image is blurry and you can't see it, the writing is too big and the formatting just generally looks off.

Also i keep seeing replies specifying the block id but the plug-in I am using doesn't show me block id for the carousel, only data section id? Is there an easy way to know what different components are called? e.g. '.user-items-list-carousel__media-container ' (I am trying to learn coding at the same time but lots to learn!)

Thanks!

P.s have included screenshot of the carousel i need to change, it looks fine on squarespace mobile view but on an actual phone with smaller screen it doesn't

#1. Just add body.homepage class name wrap around

body.homepage {
/* Change width text carousel */
@media only screen and (max-width:767px) {
  .list-item-content__description,
  .list-item-content__title{
    max-width:90% !important;
  }
}
/* Change photo size carousel */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="63849fb9df9a71511819bbb4"] .user-items-list-carousel__media-container {
    width: 70% !important;
}
}
}

#2. Can you share link to page where you use carousel? We can check code easier

Yes my original code worked, but I don't know how to specify that i only want that coding to apply to carousel on homepage.

Other carousel is on this page: https://www.opalskydigitaldesigns.co.uk/process

That's the one that looks bad on mobile view.

So does the carousel on https://www.opalskydigitaldesigns.co.uk/services

Just to add. Now i have added your code, the carousel on the services page now looks too narrow again (as the code is now applying to homepage only).

Basically the code above fixes the issue with the carousel on both services and homepage (can i specify both?)

The 3rd carousel on the process page requires something different. it's as though the text box and text itself needs to be smaller so it does not fill the entire screen on certain devices. Below i have screenshot the issue with both the process and services carousels in mobile view. You can only see the issue with the 'process' carousel in dev tools in chrome

@tuanphan are you still able to assist? thanks so much!

On 5/23/2023 at 11:02 PM, Printz said:

Yes my original code worked, but I don't know how to specify that i only want that coding to apply to carousel on homepage.

 

Other carousel is on this page: https://www.opalskydigitaldesigns.co.uk/process

That's the one that looks bad on mobile view.

So does the carousel on https://www.opalskydigitaldesigns.co.uk/services

Try adding to Design > Custom CSS

.user-items-list-item-container[data-section-id="64622aadc79944732e403a1c"] ul {
    min-height: unset !important;
}
.user-items-list-item-container[data-section-id="64622aadc79944732e403a1c"] ul li {
    padding: 20px !important;
}

On 5/24/2023 at 10:53 PM, Printz said:

Just to add. Now i have added your code, the carousel on the services page now looks too narrow again (as the code is now applying to homepage only).

Basically the code above fixes the issue with the carousel on both services and homepage (can i specify both?)

The 3rd carousel on the process page requires something different. it's as though the text box and text itself needs to be smaller so it does not fill the entire screen on certain devices. Below i have screenshot the issue with both the process and services carousels in mobile view. You can only see the issue with the 'process' carousel in dev tools in chrome

That code should run on homepage only, if it affects homepage + another page, maybe you added code to wrong position in CSS box. Can you send all current code in CSS box?