wowiwalkers replied
Customer Reply
Good to hear! I added the code in my CSS and it certainly helped on CLS for my sliders.
Thank you :)
Public Ticket #15420
CLS problems
Conversation thread
PenciDesign replied
Staff Reply
Hi,
We will improve the CLS in the next update, at this moment, you can add more this code to Customize > Custom CSS to improve your CLS for sliders:
/* = CLS for Slider
-----------------------------------------------------*/
.penci-owl-carousel:not(.owl-loaded){
display: block;
}
.penci-owl-carousel:not(.owl-loaded) > div,
.penci-owl-carousel:not(.owl-loaded) > img,
.penci-owl-carousel:not(.owl-loaded) > figure,
.penci-owl-carousel:not(.owl-loaded) .penci-featured-content-right{
display: none;
}
.penci-owl-carousel:not(.owl-loaded) > div:first-child,
.penci-owl-carousel:not(.owl-loaded) > figure:first-child,
.penci-owl-carousel:not(.owl-loaded) > img:first-child{
display: block;
}
.featured-style-2 .penci-owl-carousel:not(.owl-loaded) > .item{
width: 900px;
margin-left: auto;
margin-right: auto;
}
.featured-style-38 .penci-owl-carousel:not(.owl-loaded) > .item{
width: 450px;
width: 25vw;
margin-left: auto;
margin-right: auto;
position: relative;
}
@media only screen and (max-width: 1200px){
.featured-style-38 .penci-owl-carousel:not(.owl-loaded) > .item{
width: 400px;
}
}
@media only screen and (max-width: 960px){
.featured-style-2 .penci-owl-carousel:not(.owl-loaded) > .item{
width: 760px;
}
}
@media only screen and (max-width: 767px){
.featured-style-2 .penci-owl-carousel:not(.owl-loaded) > .item{
width: 480px;
}
}
@media only screen and (max-width: 479px){
.featured-style-2 .penci-owl-carousel:not(.owl-loaded) > .item,
.featured-style-38 .penci-owl-carousel:not(.owl-loaded) > .item{
width: 360px;
}
}
.penci-owl-carousel:not(.owl-loaded) .penci-featured-content{
display: none;
}
.penci-owl-carousel:not(.owl-loaded):before,
.penci-owl-carousel:not(.owl-loaded):after{
content: '';
clear: both;
display: table;
}
@media only screen and (min-width: 1170px){
.penci-owl-carousel:not(.owl-loaded)[data-item="4"] > div{
width: 25%;
float: left;
}
.penci-owl-carousel:not(.owl-loaded)[data-item="4"] > div:nth-child(2),
.penci-owl-carousel:not(.owl-loaded)[data-item="4"] > div:nth-child(3),
.penci-owl-carousel:not(.owl-loaded)[data-item="4"] > div:nth-child(4){
display: block;
}
.penci-owl-carousel:not(.owl-loaded)[data-item="3"] > div{
width: 33.3333%;
float: left;
}
.penci-owl-carousel:not(.owl-loaded)[data-item="3"] > div:nth-child(2),
.penci-owl-carousel:not(.owl-loaded)[data-item="3"] > div:nth-child(3){
display: block;
}
.penci-owl-carousel:not(.owl-loaded)[data-item="2"] > div{
width: 50%;
float: left;
}
.penci-owl-carousel:not(.owl-loaded)[data-item="2"] > div:nth-child(2){
display: block;
}
}
@media only screen and (max-width: 1169px) and (min-width: 769px){
.penci-owl-carousel:not(.owl-loaded)[data-tablet="4"] > div{
width: 25%;
float: left;
}
.penci-owl-carousel:not(.owl-loaded)[data-tablet="4"] > div:nth-child(2),
.penci-owl-carousel:not(.owl-loaded)[data-tablet="4"] > div:nth-child(3),
.penci-owl-carousel:not(.owl-loaded)[data-tablet="4"] > div:nth-child(4){
display: block;
}
.penci-owl-carousel:not(.owl-loaded)[data-tablet="3"] > div{
width: 33.3333%;
float: left;
}
.penci-owl-carousel:not(.owl-loaded)[data-tablet="3"] > div:nth-child(2),
.penci-owl-carousel:not(.owl-loaded)[data-tablet="3"] > div:nth-child(3){
display: block;
}
.penci-owl-carousel:not(.owl-loaded)[data-tablet="2"] > div{
width: 50%;
float: left;
}
.penci-owl-carousel:not(.owl-loaded)[data-tablet="2"] > div:nth-child(2){
display: block;
}
}
@media only screen and (max-width: 768px) and (min-width: 481px){
.penci-owl-carousel:not(.owl-loaded)[data-tabsmall="4"] > div{
width: 25%;
float: left;
}
.penci-owl-carousel:not(.owl-loaded)[data-tabsmall="4"] > div:nth-child(2),
.penci-owl-carousel:not(.owl-loaded)[data-tabsmall="4"] > div:nth-child(3),
.penci-owl-carousel:not(.owl-loaded)[data-tabsmall="4"] > div:nth-child(4){
display: block;
}
.penci-owl-carousel:not(.owl-loaded)[data-tabsmall="3"] > div{
width: 33.3333%;
float: left;
}
.penci-owl-carousel:not(.owl-loaded)[data-tabsmall="3"] > div:nth-child(2),
.penci-owl-carousel:not(.owl-loaded)[data-tabsmall="3"] > div:nth-child(3){
display: block;
}
.penci-owl-carousel:not(.owl-loaded)[data-tabsmall="2"] > div{
width: 50%;
float: left;
}
.penci-owl-carousel:not(.owl-loaded)[data-tabsmall="2"] > div:nth-child(2){
display: block;
}
}
Also, if you want to reduce the CLS more, please disable the sticky sidebar. The sticky sidebar can create more issues with your CLS because it sticks the sidebar content
Best Regards,
PenciDesign
wowiwalkers replied
Customer Reply
I use WP Rocket and they have a function: "Add missing image dimensions"
When I use this function, my CLS is perfect! However, it does break the pictures in my sidebar... Which I haven't figured out what to do about yet.
But maybe you could look into adding a feature such as this to a future update?
wowiwalkers started the conversation
Conversation Start
Hi Penci,
I'm trying to fix my high CLS (0,427) on my site.
I disabled both the sticky main bar and sticky sidebar, however I didn't really see any improvement (0,41) compared to how much I actually like the sticky ones.
Eventually I enabled them again.
I'm not unhappy with my overall site speed, however I would like to improve both my LCP and CLS.
My question to you is: Are you going to improve the theme towards Google's Core Web Vital update in May? OR do you have any suggestions to what I can do myself?
Thanks!
Cecilie
Want to join this conversation or access attachments? Sign in first.
