Solved SP Page Builder

Where Can I Reduce Size Of Images In The Team Carousel Addon?

Asked by Josef 1 year ago Last activity 1 year ago

Accepted answer

Marked as the solution
Paul Frankowski Senior Staff
1 year ago

We can help with the basic things, but we cannot be private CSS support.

Josef Asked this
1 year ago

I completely understand. It was just problem in the browser cache probably. I deleted it, but it worked properly after I opened the website in diferent browser.

5 more replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
1 year ago

Hi,

Thanks for reaching out to us, and we're sorry to hear about your issue. Are you referring to these images? You can use this CSS in your custom.css file.

.sppb-carousel-extended-item img {
    width: 200px !important;
}

-Regards.

Mehtaz Afsana Borsha Staff
1 year ago

Hi

Is this resolved now? If yes, you can then close this post by accepting the answer.

Josef Asked this
1 year ago · edited

Hi,
it worked partially.
But I need to looked this way.
I tried multiple variants of code in the CSS box of the carousel addon and it still doesn't look the right way.

.sppb-carousel-extended-item img {
    width: 100px !important;
    height: 80px !important;
    margin: 0 auto;
}
.sppb-carousel-extended-item .active .clone {
    width: 200px !important;
    margin: 0 auto;
.sppb-carousel-extended-team-content {
  box-shadow: 0 !important;
  padding: 0 !important;
}

}
.sppb-carousel-extended-team-content-wrap {
    width: 200px !important;
    margin: 0 auto;
}

Link to the page is in hidden content.

Thanks for answer.

Paul Frankowski Senior Staff
1 year ago · edited

Ahoj,

all your images are square, so don't use height value smaller than width, it doesn't make sense, because they are resized in wrong way.

Use that instead

height: auto !important;

add also that Custom CSS line

.sppb-carousel-extended-team-name  {
  line-height: 26px;
  text-align: center;
}

and I suggest using font-size 22px not 24px for Team Name text.

Josef Asked this
1 year ago

Hi,
it worked partially. Last thing that isn't workning is that shadow. I moved all code into custom.css and it looked like this:

@charset "UTF-8";
.sppb-carousel-extended-item img {
    width: 100px !important;
    height: auto !important;
    margin: 0 auto;
}

.sppb-carousel-extended-item .active .clone {
    width: 200px !important;
    margin: 0 auto;
}

}
.sppb-carousel-extended-team-content {
    box-shadow: 0 !important;
    padding: 0px !important;
}

}
.sppb-carousel-extended-team-content-wrap {
    width: 200px !important;
    margin: 0 auto;
}

.sppb-carousel-extended-team-name  {
  line-height: 26px;
  text-align: center;
}

but shadow still shows up.
Thanks for reply.

Mehtaz Afsana Borsha Staff
1 year ago

Hi

Is this solved now?

Log in to reply.