Site not working well with Edge

The buttons are not working with Edge browser. Please let me know if this is possible to fix

  • Predrag Dubajic
    • Support

    Hi allanlove,

    I have checked your site in Edge browser but I'm afraid that I couldn't see any issues in there, I have looked at the Our Programme page and tested Book a class button, slider buttons and so on but they all work fine for me.

    Could you tell me a bit more what the exact issue with the button is and how could we replicate it?

    Best regards,
    Predrag

  • allanlove
    • Site Builder, Child of Zeus

    Hey,

    Thank you for having a look into this.

    Yes it is the Our Programme page, if you scroll to the section with 6 different coloured squares in they should anchor to the relevant sections below but I have been informed that in edge they don't..

    Please see the attached screenshot.

    Regards
    A

  • Predrag Dubajic
    • Support

    Hi allanlove,

    Anchors will scroll to the top of your page, and because you have fixed header it will go above your content.
    You can try applying this fix to your anchor locations to go around this issue:
    https://www.itsupportguides.com/knowledge-base/tech-tips-tricks/how-to-offset-anchor-tag-link-using-css/

    For example, for your "3 Years – School Age" section it would look like this:

    #pg-21-10:target:before {
        content:"";
        display:block;
        height:215px; /* fixed header height*/
        margin:-215px 0 0; /* negative fixed header height */
    }

    Best regards,
    Predrag

  • allanlove
    • Site Builder, Child of Zeus

    Hi,

    My customer is experiencing issues on edge on this page
    http://tumbletots.allanlove.net/map/

    When they click on a location the three buttons are all squished and doesn't display properly, I am unable to replicate this as I am using a mac and not windows.

    I have attached a screenshot of what they see and what it should look like.

    I wasn't sure if there was some code which makes the site compatible with Edge?

    I look forward to your response,

  • Predrag Dubajic
    • Support

    Hi allanlove,

    It seems that on Edge the size is a bit different and it doesn't allow everything to fit into one row.
    You can try reducing font size or padding a bit (or both) and that should do the trick.
    For example, reducing the padding with below CSS should work:

    #sl_postcode_lookup_results li p .sl_buttons > p > a {
        padding: 0.3em 0.2em;
    }

    P.S. You can checkout browserstack for testing your site on different browsers :wink:

    Best regards,
    Predrag

  • Predrag Dubajic
    • Support

    Hi allanlove,

    I had a look at your site on Edge and the issue seems to in a way that your page builder is building the anchor links which doesn't work properly on Edge.
    When you hover on those boxes in Chrome it will show anchor link like this:
    site.com/#anchor
    While in Edge it shows %23 instead of the # sign so it looks like this:
    site.com/%23anchor

    This is not a CSS issue but rather looks like something caused by the page structure created by your page builder.
    I would suggest getting in touch with your page builder plugin devs and ask them why this is happening when anchor links are used in page builder elements.

    Best regards,
    Predrag

  • allanlove
    • Site Builder, Child of Zeus

    Hey,

    I have contacted the theme developers but whilst waiting i tried part of the url in the square buttons so instead of just using #six-months-walking to link i used /our-programme/#six-months-walking and now on edge AND CHROME it scrolls but it scrolls past where its supposed to?

    Could you help me fixing this?

    So on chrome it now doesn't land in the correct place either

    Regards

  • Predrag Dubajic
    • Support

    Hi allanlove,

    It seems that the change you made is now causing console errors on your site and is preventing the anchors to work properly, if I edit the HTML directly from the page inspector and use the old anchor link in the URL then it works fine and scrolls to the proper place.
    So I'm afraid that the response from plugin developers will be needed here to get this working properly.

    Best regards,
    Predrag

  • allanlove
    • Site Builder, Child of Zeus

    Hi,

    I have now had a response from them. It's quite blunt and doesn't really help me at all. ????

    Their response; That will need lots of code customization work, which could not get covered up via any support platform. Hope you can understand.

    So any help you can offer me would be appreciated!

    Regards

  • Predrag Dubajic
    • Support

    Hi allanlove,

    So from what I understand the page builder you are using doesn't support anchor links for IE and Edge?
    If that's the case I'm afraid that going around this will require custom development if they are unable to support it and you might need to hire a developer to sort it out for you by editing the plugin itself.

    You might want to check if there's perhaps a conflict with something else on your site but creating a staging site with clean WP installation and only a similar page built with that page builder and see if the anchors work there.

    Or you might want to consider using a different page builder that will work properly with all browsers and base your site on that instead.

    Best regards,
    Predrag

  • Adam Czajczyk
    • Support Gorilla

    Hello allanlove

    When an anchor link - that's within the same page as its target - is clicked, pretty much "nothing" happens except browser scrolling the rendered page to a designated location. No CSS is reloaded, thus it can't "interact". Anything that would have to be executed to "dynamically push header up" would have to be executed in browser so that would mean changing how those links work entire:

    hook a JavaScript (jQuery) code to the "click" event so it would be executed when user clicks on a hover link, then scroll the page down with JS by calculated offset to the target location.

    That could actually even spare you "pushing header up when an anchor link is used" as it would allow you to already "include" header height and position as well as viewport dimensions (so screen resolution) in calculation. However, this would also mean quite a bit of custom coding which, I'm afraid, is outside the scope of this support.

    Kind regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.