Skip Navigation

[Resolved] Layout janking around on page load with custom CSS

This thread is resolved. Here is a description of the problem and solution.

Problem:
A page with a View that includes custom CSS janks around when loading, i.e. the page loads without the styles and then after a delay the styles are applied.

Solution:
We may change the behaviour of how custom CSS is added, but at the moment it involves JS being used to apply the CSS.

This can be avoided by just adding your custom CSS inside style tags in any of the editors in a View.

This support ticket is created 6 years, 4 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 2 replies, has 2 voices.

Last updated by davoodD-2 6 years, 4 months ago.

Assisted by: Nigel.

Author
Posts
#953260

Please take a look at these pages:
hidden link
hidden link

On both pages we have code similar to the css below saved in Loop Editor >> CSS Editor

@media screen and (min-width: 681px) {
.row {
width: 85%;
}
}

The code works and resizes our images however, the page loads before it resizes the images.. on all of our pages that use a view the images resize appropriately before the page loads... We can not for the life of us determine why this is.

Any help would be appreciated!

Thank you.

#953488

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Screen Shot 2018-07-23 at 09.52.05.png

Hi there

You mean the page loads and it takes some time for your custom CSS that resizes the image to take effect?

The reason is that the custom CSS you add in the View would be printed in the page body, which is not strictly valid HTML even though it works in all browsers, and so we use JavaScript to hoist the CSS into the head tags, which happens when the page has loaded and accounts for the delay in your styles being applied.

The solution is simple enough, which is to add your styles within style tags directly, in any of the editors in your View.

Probably the least obtrusive place would be to use the Output Editor section, as shown in the screenshot.

#953573

Thanks for your help! That resolved the issue!