Troubles using slider on 15″ Google Chrome

Ok, there is some CSS code within your parent theme’s (ITHYLO?) style.css file that is causing this issue.
https://wecodeit.fr/wp-content/themes/ithylo/style.css

So from lines 2075 in your parent theme’s ‘style.css’ file there is some CSS code specific to OWL CAROUSEL:

/* Slider */
.sa_owl_theme .owl-dots .owl-dot{
    margin: 5px;
    margin-bottom: -5;
}
.owl-dots *{
    outline: none;
}
.sa_hover_container{
    border: 3px solid rgb(29, 193, 155);
}
.owl-carousel .owl-stage{
    display: flex;
    align-items: center;
}
#slider .owl-item *{
    transition: font-size .1s, opacity .1s ease-out;
}
#slider .owl-item{
    transition: font-size .1s, opacity .1s ease-out;
    display: flex;
    align-items: center;
}
#slider .sc_partial{
    transition: font-size .1s, opacity .1s ease-out;
    opacity: 0.4;
}
#slider .sc_partial *{
    transition: font-size .1s, opacity .1s ease-out;
    font-size: 11px;
}

(the lines with the #slider ID prefix wont be an issue, its the top ones…)

Slide Anything is built using the Owl Carousel engine, and it seems that your theme also uses OWL CAROUSEL for something. Easy way to test this is to switch themes temporarily (e.g. WP 2019 theme), to see if the problem persist on your 15″ display (under 1500 pixels).

• This reply was modified 4 years, 9 months ago by simonpedge.

You could try adding the following CSS to your child theme ‘style.css’ file:

.owl-carousel .owl-stage { display:block !important; }
@media only screen and (max-width: 1501px){
.sa_hover_container { max-width: 90%; }
}

That might resolve it.

• This reply was modified 4 years, 9 months ago by simonpedge.

Thank you for the quick reply.
I tried to deactivated everything I added, I had some duplicates in my CSS indeed I forgot to turn off.

Seems like my problem was before the last updates, it is now working properly.
Thank you for your time and your awesome work !

No Problem – glad you got it sorted out! ??

I do need help on something : how can I select (and apply CSS) on the centered div? It’s easy on wide desktops but it looks offset on small ones (15 inches again)

Thank you!

Are you talking about the content for each slide?
(because I see that the content text is all left-aligned above 1500px and below 1500px)

I’m talking about the slide itself. The centered slide on wide desktops has class “active” and its siblings “sc_partial” but on small desktops this is not the case and the centered div is the one next to the last “sc_partial”. I would like to apply some style on the centered one on every resolution…

Thank you