Where Can I Reduce Size Of Images In The Team Carousel Addon? - Question | JoomShaper
SP Page Builder 6 is Here! Learn More →

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

J

Josef

SP Page Builder 2 months ago

I found this question: https://www.joomshaper.com/forum/question/39819 But there is now answer, so I'm asking again.

0
8 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 week ago #206211

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

0
J
Josef
Accepted Answer
1 week ago #206289

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.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 months ago #199891

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.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 month ago #202485

Hi

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

0
J
Josef
Accepted Answer
3 weeks ago #204979

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.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 weeks ago #204982

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.

0
J
Josef
Accepted Answer
1 week ago #206205

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.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 weeks ago #205074

Hi

Is this solved now?

0