Support Center Visit Demo License manager Buy @ envato

Page Load CSS ISSUE - Order of Styles activated and displayed are not correct

kdzignkdzign
in General info & installation
Hello,

Needing insights to how I can solve the CSS load order for all the pages on new site.. it has been worked on for 1 year and now ready for launch but this load and display issue is holding back.    

There is a green 'swoosh' I call it that is a absolute positioned .PNG image to act as a trim separator horizontally across right below the slider bottom.  This .PNG loads before the CSS the set it to fully span the width of screen.  

Here is the development link URL  :  http://www.wonderpointwc.com/wordpressdev/

I need to find out how to place code or re-order the load of this CSS for the 'green swoosh' .PNG to be rendered full width before it displays on page load..

Please if anybody can help... this is causing big delays... it's looks unprofessional to have the screen load with a broken glitchy type of feel immediately. 

The Code for this CSS on the .PNG image is part of the custom CSS area built into Visual Composer upper right corner of each page where you can enter per page CSS etc.   


Thank you for assistance,



Comments

  • PabloPablo
    Hi,
    Please disable all of the cache/minify plugins.
    I cannot take a look at your source code of your website.

    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • kdzignkdzign
    OK  It will be done within 6hrs of this post   ty
  • kdzignkdzign
    Turned off now
  • PabloPablo
    This CSS is working fine.

    Remember, if you want to be sure that this code will be working, please apply the !important and the end of the css rule.
    Example:

    .cssClass{
    width: 100% !important;
    }

    But it's not created correctly, but as I see, you want to do advanced css code, and we do not support it at all.
    Also, why you don't turn on the "Full Width" option on that section on the top, as you do in the all of the below sections with this stripe.
    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • kdzignkdzign
    Thank you!  
  • kdzignkdzign
    Hello to be sure.. we are on the same thinking...  

    I am asking for a way or best practice to alter how the page load display occurs.. instead of some images loading then the CSS rules get styled..  to have the CSS rules styled beforehand 

    in my case its mainly for the Green graphic line separating the slider from the content below. 
    The page loads the green png image before the CSS rules get applied.. 

    Is this proper understanding from the first post?   thank you.


  • PabloPablo
    I do not understand at all what you mean.
    The CSS rules will be working even if something(a green png in your case) will be loaded later.
    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • kdzignkdzign
    Ok.. I apologize for any any misunderstandings.. my terms may not be correct.. 

    The home page for example.. as it loads .. for some reason you see the green .png separation image load up before anything else.. and it is at that moment.. not full width.. as other elements load like the slider etc.. moments later the CSS to change the green PNG to full width spanning the leftmost and rightmost edges of the device/browser border.  

    I am hoping to get advice/solution on how I change this behavior via a edit in some place that could allow the CSS to be present in load sequence BEFORE the Green png loads..  would this allow the appearance on page load to be what we are after.. 

    If we could even not display anything until all loaded elements are in place then display the rendered elements styled.. is something i've read about in articles ive tried to research..  I just wouldnt know how to edit the code in places where it would be appropriately safe from any updates overwriting.

    I've thought if there is a plugin for placing CSS in certain load areas etc..  just taken so many weeks that I bought more support to assist.. as I do not have anyone in my circle to address this issue for me. 

    Thank you
  • BryanBryan
    hello,
    this is normal. Things load after each other, so html loads first, then css and JS. This is why you see this strange behaviour.
    Only sollution we could propose, is to use a pre-loader of some sorts. This could we either a custom script or a plugin. Pre-loaders help with those issues, they cover the page, and show it when it loads fully.
    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • kdzignkdzign
    YES THANK YOU... I just need to find
Sign In or Register to comment.