The Sidebar appear to overfloat.Width is not calculated correctly.

  • Resolved Efs

    (@stevendigital)


    3 years, 4 months ago

    Hello,

    I have a problem with the site’s sidebar and I try to find why this happens.

    Here is a link with the problem

    You can check this URL and see that the bar on the left with the tour appears out of the screen and an overflow bar appears.

    I am also using WPfastest cache, but no JS/CSS minification/optimization from this plugin.

    Also, I am excluding these CSS files wp-content/cache, wp-content/uploads, wp-content/uploads/physcode/physcode_travelwp.css, but still the problem occurs.

    The one thing that I noticed is that if you search in the dev console for this class
    .affix-sidebar with the id sticky-sidebar you will see that there is an inline CSS style that adds a specific width and top. So my best guess is that a JS is responsible for width calculation or I miss something.

    Also on the second load of the page, the width seems to be calculated correctly. On top of that, the sidebar becomes sticky when the user scrolls, but neither of the above happens.

    Can you provide me any guidelines on where to look or what else to exclude?

    Best Regards

    • This topic was modified 3 years, 4 months ago by Efs.
Viewing 15 replies - 1 through 15 (of 17 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    First and foremost try to identify what is breaking things by just disabling CSS or JS or HTML or Image optimization (incl. lazyload). Based on that we can see what the next steps need to be ??

    frank

    Thread Starter Efs

    (@stevendigital)

    Thank you for your answer.

    Is it possible that the above-the-fold CSS could cause any of these problems?

    Best Regards

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    well;
    * is the problem fixed when you disable CSS optimization?
    * is the problem fixed when CSS optimization is on, but “inline & defer CSS” is off?

    Thread Starter Efs

    (@stevendigital)

    I will do all the tests and if I am not able to figure things out I will post a reply here.

    Also, something that I wanted to ask. If I use NGINX or have some expiration headers, will this affect what I see on the site?
    Also is it possible to purge the cache of NGINX if I disable it and reenable it?
    Or I should contact my host to figure this out?

    Best Regards

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Also, something that I wanted to ask. If I use NGINX or have some expiration headers, will this affect what I see on the site?

    no, that should not matter.

    Also is it possible to purge the cache of NGINX if I disable it and reenable it? Or I should contact my host to figure this out?

    better ask you host indeed.

    Thread Starter Efs

    (@stevendigital)

    1) Ok, so I disabled the “Above the fold CSS” and it seems to be working fine. Is it possible to add for every page, a specific above-the-fold CSS for every page?
    I am asking because if I use the box you provide and add every above-the-fold CSS, the file will become very large.

    2) Also, I noticed this JS error in the chrome dev.platform:

    Uncaught TypeError: e.indexOf is not a function
    at S.fn.init.S.fn.load (jquery.min.js?ver=3.5.1:2)
    at (index):91

    Is there any fix for that? I have excluded the jquery.min.js in the JS optimization and to be more specific this is the whole list of the exclusions:
    js/jquery/jquery.min.js, jquery.js, ct_check, js_register_form, wp-content/uploads/cached-scripts/, js/ganalytics.js, wp-content/uploads/cached-scripts/gtag.js

    Best Regards

    • This reply was modified 3 years, 4 months ago by Efs.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    for (1) you can either use the “add CSS to all rules” button that is visible underneath the rules and/ or you can use the “force include” logic in Settings -> Autopitmize -> Critical CSS -> Advanced settings

    for (2) try adding jquery-migrate.min.js to the exclusion list maybe?

    Thread Starter Efs

    (@stevendigital)

    1) Can you elaborate a bit more. It seems that I can not find this in the path that you refer to.

    2) I added the jquery-migrate. It seems to work fine now and the error is gone.

    3) Off-topic but I think it will help a bit: The link for https://www.loadlabz.com/ is not working. If I click on the FAQ section I go to a page with a time out error (ERR_CONNECTION_TIMED_OUT)

    Best Regards

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    (3) I’ll ping Oisin, thanks!

    for (1) there is (1a) which is about the “add CSS to all rules” button and (1b) which is about the “force include” text-field in AO CCSS’ advanced options, see screenshot below ??

    Thread Starter Efs

    (@stevendigital)

    1) Ok. Sorry I could not see that screen as it seems that I must pay a subscription in criticalcss to get an API key. In the previous communications, I was referring to the options you provide in the JS, CSS & HTML tab. I have a subscription in critical CSS but is the manual implementation of criticalCSS.

    Thank you for the clarifications.

    Best Regards

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    OK, the “force include” parameter is also available as advanced option on criticalcss.com, and adding CSS to the critical (above the fold) CSS you can always do yourself ??

    Thread Starter Efs

    (@stevendigital)

    Yes, you are right. I never saw that setting in critical CSS.
    Thank you for pointing this out.

    So if I add the page id of the homepage only, the above fold will run for the home page?
    I can not find any documentation, just an FAQ that does not explain much.

    If you have this info let me know.

    Best Regards

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    no, “force include” does not work with page id’s, it’s about forcing specific CSS to be included in the critical CSS, based on CSS selectors with CSS id’s or classes.

    Thread Starter Efs

    (@stevendigital)

    That makes more sense now. So I can include classes and ids from other pages on the CSS.
    I was a bit lost on this one. Now it makes more sense.

    Thank you for all the help you provided and mostly the response time was immediate.

    Best Regards

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    you’re welcome, feel free to leave a review of the plugin and support here! ??

    have a great day!
    frank

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘The Sidebar appear to overfloat.Width is not calculated correctly.’ is closed to new replies.