Resize, Center-align and Link the Oslen Light Carousel

Hi there,
1. In order to resize the slider you will just need to add smaller images, or you can configure your images using this https://www.cssigniter.com/modify-image-sizes-using-simple-image-sizes/
2. To center the carousel you will need to add this

#site-content .col-md-8,
#site-content .col-md-4 {
    height: auto!important;
}

in your custom CSS box
3. Add this

.slide .slide-content,.slide .slide-content a {
    display: block;
    opacity: 0;
    left: 0;
    width: 100%;
    right: 0;
    height: 100%;
    transform: none;
    top:0;
    bottom:0;
    position:absolute;
}

in your custom CSS box

Let me know if you need additional help on this.

Hi Fotis

Thank you for your help.
I’ve added the code and unfortunately it didn’t change anything. The links work but that’s it. Any idea what to do now?

Thanks,
Domenica

Hi there,
I cannot see the suggested code, can you please add it before any other you might have?
Also can you remove this
.slide .slide-content{ display:none; }
from your CSS box since it is not needed now and add this instead

.slick-slide img {
    margin:auto

}

Let me know if this worked for you.

• This reply was modified 5 years, 5 months ago by Fotis.

This is all my custom CSS

/* Enter Your Custom CSS Here */
#footer .site-logo{
display:none;
}
.copy-text{
margin-top:10px;
}
.tagline{
display:none;
}
.site-bar .nav{
width:100%;
}
.widget{
border:none;
}
.sidebar.sidebar-right{
border:none;
}
.page-id-1799 footer{
display:none;
}
#site-content .col-md-8,
#site-content .col-md-4 {
height: auto!important;
}
#site-content .col-md-8,
#site-content .col-md-4 {
height: auto!important;
}
.slide .slide-content,.slide .slide-content a {
display: block;
opacity: 0;
left: 0;
width: 100%;
right: 0;
height: 100%;
transform: none;
top:0;
bottom:0;
position:absolute;
}

Seems like it worked. What do you think?

Hi there,
Yes it did!
Let me know if I can help out more.