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, 10 months ago ago by Olga Barlow

aurangzebaa

Participant

December 25, 2021 at 10:58

kindly pls tell me how to solve this layout issue. I cant seem to eliminate it.
Pls send me some code or steps to solve this issue.
I would really be thankful

#313064 Copied Theme version: 8.0.11

30 Answers

Rose Tyler

Support staff

December 26, 2021 at 09:20

Hello,

At first sight, we do not see the problem.
Please provide URL and screenshots, for a better understanding.

Regards

#313077 Copied

aurangzebaa

Participant

December 27, 2021 at 11:24

please try on a new browser and clear cache.

When you first enter the URL, the black box which contains 4 logos appear at the top and then it moves downward after which the revolution slider appears. This is the layout shift I’m talking about.
kindly tell me how to solve this asap thank you

#313142 Copied

Rose Tyler

Support staff

December 27, 2021 at 15:10

I can’t find the correct wp-admin access to your site, so can’t check the settings you have set for the content appearing.
Provide wp-admin access, and describe the desired result you want to get.
Try to activate Site Preloader in Theme Options > General.

Regards

#313167 Copied

aurangzebaa

Participant

December 27, 2021 at 19:51

the wp admin access is not possible as of now since its with the client.
however, if you check the screenshot attached or test on pagespeed you will find how the site is loaded.
first the black rectangular box is loaded at the top of the screen and then it moves downward so that the revolution slider can load. i don’t want this to happen

I have tried site preloader but it makes the site look very off. please help me
https://i.postimg.cc/QxRtLsvR/la.png

#313191 Copied

Olga Barlow

Support staff

December 28, 2021 at 15:52

Hello,

You may try to add a custom class for the row with the slider and add custom code to set min-height for that row that is the same as the slider height to avoid that shift. Check if that helps you. If not then we don’t have any other ideas on how to change that because the Revolution slider appearance is not under theme control.

Regards

#313234 Copied

aurangzebaa

Participant

December 28, 2021 at 16:33

wouldn’t setting min-height cause problems in responsive design?

#313240 Copied

Olga Barlow

Support staff

December 28, 2021 at 17:38

Hello,

You can use media queries to set different heights for desktop and mobile devices.

Regards

#313251 Copied

aurangzebaa

Participant

December 28, 2021 at 19:36

could you please tell how to set It such that it doesn’t distorts the responsiveness on any device?

#313285 Copied

Olga Barlow

Support staff

December 29, 2021 at 10:22

Hello,

Provide WP Dashboard access. I’ll create an example.

Regards

#313310 Copied

aurangzebaa

Participant

December 29, 2021 at 11:35

could you provide me with the code.
my client have the access only to it now

#313325 Copied

Olga Barlow

Support staff

December 29, 2021 at 11:37

Hello,

Add any custom class for the row in the row settings while you edit that. After that reply back and we’ll provide you custom CSS that you will need to add to your page custom CSS area.

Regards

#313327 Copied

aurangzebaa

Participant

December 29, 2021 at 12:41

could you please elaborate it a bit more?

#313335 Copied

Olga Barlow

Support staff

December 29, 2021 at 12:59

Hello,

Go to Pages > edit home page > edit row with the slider > add any custom class https://prnt.sc/253litl Save changes.

Regards

#313337 Copied

aurangzebaa

Participant

December 31, 2021 at 20:17

I have added the class name.
et-custom-height

please tell what to do now

#313529 Copied
Olga Barlow

Support staff

January 4, 2022 at 10:45
Hello,

Add for example the below custom to page custom CSS https://prnt.sc/25yegmw
```
@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;
    }
}
```
Regards
#313619 Copied
aurangzebaa

Participant

January 4, 2022 at 12:07

this has helped a bit however if you could still see on pagespeed or in the screenshot below, the revolution slider box still does not appear in the first few milli-seconds due to which all of the below elements take its space and there is an overall layout shift.
pls tell me how to fix that too.
thank you for your help so far

https://i.postimg.cc/4xL3F5j5/layout.png

#313625 Copied

Olga Barlow

Support staff

January 4, 2022 at 17:44

Hello,

Sorry, but we don’t have more suggestions for this. Contact Revolution slider plugin team https://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380/comments Maybe they will suggest you something helpful.

Regards

#313669 Copied

aurangzebaa

Participant

January 5, 2022 at 10:12

there is no response from them as of now. I emailed them since I cant comment on their envato site as I didn’t purchased it. kindly help me with that. I cant contact wp rocket and slider revolution directly. kindly help me with that or transfer my query to them yourself.

PLEASE help I would be really thankful to u

#313728 Copied

Olga Barlow

Support staff

January 5, 2022 at 13:04

Hello,

You can leave a comment even if you did not purchase the item. The comments area is available for all the users. So, just log in to your Envato account and leave the comment, please. We also don’t have any other way to contact them, only using the comments area or author contact form https://codecanyon.net/user/themepunch

Regards

#313751 Copied

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
Tagged: eliminate, layout, persuasive, shift, themes, woocommerce, wordpress
1 2

Viewing 30 results - 1 through 30 (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