Center project widget


#1

Hey again,

I am using the project widget on my front page, but I only want to show three projects. Right now the slider is left-aligned – is there any way to center it?
Here´s the link: http://www.fruehling-pt.de

Thanks for all the help

Steph


#2

Hi there…

Try this CSS code please:

.owl-carousel .owl-wrapper {
    width: auto !important;
    justify-content: center;
}
.owl-carousel .owl-item {
    float: none;
    display: inline-block;
}

put the code into Customizer > Additional CSS.


#3

Perfect, that worked! Thanks a lot.

I hope I´m not getting too off topic with this, but is there also a way to create some space between the projects?

Best

Steph


#4

Yup… to do that, replace this code:

.owl-carousel .owl-item {
    float: none;
    display: inline-block;
}

with this:

.owl-carousel .owl-item {
    float: none;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
}

#5

Thanks!:slight_smile:

Best

Steph


#6

Sorry, I need your help again here. I just realised something strange happened now to the projects in mobile view… They are shown beneath each other, but at the same time still in a slideshow, only that all slides except the first one are empty… Is there a way to show just one project at a time, and navigate through them via the slider?

Thanks!

Steph


#7

Ah I see… Please replace the code in above with this:

@media (min-width: 992px){
  .owl-carousel .owl-wrapper {
    width: auto !important;
    justify-content: center;
  }
  .owl-carousel .owl-item {
    float: none;
    display: inline-block;
  }
}