Custom CSS need

Hi there please help us with custom CSS for current Container
We looking to set specific size 210 heigh

Thank you

Attachments:

You must be logged in to view attached files.

We need to create a carousel item with specific size 210 px and items listed to be randomly shows if it’s possible , any information help

.wd-carousel-item {
position: relative;
height: 210px !important; /* set size 210px */
flex: 0 0 calc(100% / var(–wd-col));
max-width: calc(100% / var(–wd-col));
padding: 0 calc(var(–wd-gap) / 2);
transition-property: transform;
transform: translate3d(0px, 0, 0);
} works but not showing all items

you can check image

Attachments:

You must be logged in to view attached files.

.wd-carousel-item {
position: relative;
height: 210px !important; /* set size 210px */
flex: 0 0 calc(100% / var(–wd-col));
max-width: calc(100% / var(–wd-col));
padding: 0 calc(var(–wd-gap) / 2);
transition-property: transform;
transform: translate3d(0px, 0, 0);
}

not valid we set from elementor

if you see this poste please help how we can set the arrow (size and color) for this carousel

You can find on image attached, current carousel, and arrows location

Attachments:

You must be logged in to view attached files.

Hello,

Can you please share the page URL so I will check and give you a possible solution.

Best Regards.

you can create on your testing environment a new container and insert a banner carousel,

we can’t list a website full of errors we need your support to go ahead, once we have all function worked we can go to publish , so atleast one response , we offer much details as possible if you need more I’m here

Attachments:

You must be logged in to view attached files.

please check also img attached

Attachments:

You must be logged in to view attached files.

[Aizaz Imtiaz Awan]

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.wd-arrow-inner{
    height: 50px !important;
    width: 40px !important;
}
.wd-arrow-inner:after {
    font-size: var(--wd-arrow-icon-size, 40px) !important;
}

Best Regards.

• This reply was modified 1 day, 11 hours ago by Aizaz Imtiaz Awan.
• This reply was modified 1 day, 11 hours ago by Aizaz Imtiaz Awan.

not working 🙁

I set .wd-arrow-inner {
height: 50px !important;
width: 40px !important;
color: black !important; /* Adaugă culoarea neagră */
}

.wd-arrow-inner:after {
font-size: var(–wd-arrow-icon-size, 40px) !important;
color: black !important; /* black color icon */
}

Working woohooo thanks

One more thing please, I need to set a hover for arrows if it’s possible to be more visible
And what should I do for mobile to be showed ?

Thank you

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.wd-nav-arrows[class*="wd-hover"].wd-pos-sep .wd-btn-arrow{
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

Best Regards.

great it’s working your code Thank you, we find another issue regarding arrows,

Once you acces the page you can use the arrow JUST if you move over mouse then it’s activated and product are alighned to lef, what we looking is when customer acces the page and see this carousel once press the arrow even left or right to move the products

I modify as the code because this is what we looking for as fallow :

/* Basic style for button without shadow */
.wd-nav-arrows[class*=”wd-hover”].wd-pos-sep .wd-btn-arrow {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
background-color: #ffffff; /* default white background */
box-shadow: none; /* no shadow */
transition: background-color 0.3s ease, box-shadow 0.3s ease; /* transition for hover */
}

/* Style for button on hover */
.wd-nav-arrows[class*=”wd-hover”].wd-pos-sep .wd-btn-arrow:hover {
background-color: #FAFAFA !important; /* light gray background on hover */
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* uniform shadow around the button */
}

Please check image attached

Thank you

Attachments:

You must be logged in to view attached files.

please check video attached

video

Attachments:

You must be logged in to view attached files.

[Author]

Posts