Return to previous page

Pls visit my site and tell me how to eliminate this layout shift

This topic has 31 replies, 3 voices, and was last updated 2 years, 3 months ago ago by Olga Barlow

aurangzebaa

Participant

January 5, 2022 at 13:30

could u please visit my site and check how to reserve the space for it so that there is no layout shift?

#313758 Copied

Olga Barlow

Support staff

January 5, 2022 at 13:50

Hello,

Try to enable Designate Space on Page option that Revolution slider has for these purposes
https://www.sliderrevolution.com/documentation/module-general-settings/
If it also does not help then we don’t have more solutions. Contact Revolution slider support team in this case.

Regards

#313763 Copied

aurangzebaa

Participant

January 9, 2022 at 18:31

could you please provide me with an updated version of this?

@media only screen and (max-width:768px){
.et-custom-height {
min-height: 200px;
}
}
@media only screen and (min-width:769px){
.vc_row.wpb_row.et-custom-height {
min-height: 436px;
}
}

its not working now.maybe because the picture is changed. kindly check

#314031 Copied

Olga Barlow

Support staff

January 10, 2022 at 13:21

Hello,

Have you tried Designate Space option https://prnt.sc/26c2gb1 described here https://www.sliderrevolution.com/documentation/module-general-settings/ ?

Custom code is in place and it’s applied for the row https://prnt.sc/26c2fow

Regards

#314092 Copied

aurangzebaa

Participant

January 10, 2022 at 18:19

designate option is turned on.
also it was fixed before but rn the picture has changed due to which there are errors again. could you please change the custom code again according to the current picture. just need a minor change in the same code.
pls help

#314148 Copied
Olga Barlow

Support staff

January 10, 2022 at 18:45
Hello,

You changed not the image but the slider layout type to full-width. So, the height of the slider changes depending of the device with and that code is not very suitable in this case. You may try to replace
```
.vc_row.wpb_row.et-custom-height {
min-height: 436px;
} 
```
with
```
.vc_row.wpb_row.et-custom-height {
    min-height: 50vw;
}
```
And
```
.et-custom-height {
min-height: 200px;
}
```
with
```
.et-custom-height {
min-height: 312px;
}
```
But not sure if it helps a lot.

Regards
#314157 Copied
aurangzebaa

Participant

January 10, 2022 at 18:48

is this the correct code?

@media only screen and (max-width:768px){
.et-custom-height {
min-height: 200px;
}
}
@media only screen and (min-width:769px){
.vc_row.wpb_row.et-custom-height {
min-height: 50vw;
}
}

#314159 Copied

aurangzebaa

Participant

January 10, 2022 at 18:50

could you please check this on your end too.
i have provided wp access so u can test that too if u need it. thank you.
do tell me if it works
check below

Please contact administrator
for this information.

#314160 Copied

Olga Barlow

Support staff

January 10, 2022 at 19:15

Hello,

Check now https://gtmetrix.com/reports/everydayorganics.pk/LpTqNQT8/

Regards

#314166 Copied

aurangzebaa

Participant

January 10, 2022 at 19:29

on pagespeed and gt metrix both stats have decreases significantly. PLS help

https://i.postimg.cc/MGVPvwsY/shift.png

there is still some shift..code needs minor changes

ALSO pls tell if I need to add ” @media only screen and (max-width:768px){ ”
in your above code too

@media only screen and (max-width:768px){
.et-custom-height {
min-height: 200px;
}
}
@media only screen and (min-width:769px){
.vc_row.wpb_row.et-custom-height {
min-height: 50vw;
}
}

#314170 Copied

Olga Barlow

Support staff

January 11, 2022 at 12:36

Hello,

Custom code in your child theme style.css is ok.
We suggested to you everything we could to avoid layout shifts. We don’t have more tips.

Regards

#314214 Copied
Tagged: eliminate, layout, persuasive, shift, themes, woocommerce, wordpress
1 2

Viewing 31 results - 21 through 31 (of 31 total)

The issue related to '‘pls visit my site and tell me how to eliminate this layout shift’' has been successfully resolved, and the topic is now closed for further responses

Pls visit my site and tell me how to eliminate this layout shift

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection