This topic has 31 replies, 3 voices, and was last updated 2 years, 3 months ago ago by Olga Barlow
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
Hello,
At first sight, we do not see the problem.
Please provide URL and screenshots, for a better understanding.
Regards
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
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
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
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
wouldn’t setting min-height cause problems in responsive design?
Hello,
You can use media queries to set different heights for desktop and mobile devices.
Regards
could you please tell how to set It such that it doesn’t distorts the responsiveness on any device?
Hello,
Provide WP Dashboard access. I’ll create an example.
Regards
could you provide me with the code.
my client have the access only to it now
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
could you please elaborate it a bit more?
Hello,
Go to Pages > edit home page > edit row with the slider > add any custom class https://prnt.sc/253litl Save changes.
Regards
I have added the class name.
et-custom-height
please tell what to do now
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
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
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
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
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
Tagged: eliminate, layout, persuasive, shift, themes, woocommerce, wordpress
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