Front-end issue: Button not showing up properly in mobile for chrome.
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

The site is: https://www.pathwaystoeducation.ca/ and the button is located in the nav bar.

Currently the donation button needs to be vertically aligned.
It is vertically aligned in Safari and iPhone,
https://imgur.com/a/Z6ltf06

However, on Chrome (mobile view) and on Android, it is not.
https://imgur.com/a/DJmMrkN

I am looking to isolate the code that is causing this and a solution to it.

Note: The site is created in Wordpress using the Divi builder and custom css.

awarded to fabian muema

Crowdsource coding tasks.

2 Solutions

Winning solution

<style>
@media only screen and (max-width: 768px) {
         .mobile_menu_bar {
                 top: -15px;
          }
          #et_mobile_nav_menu .donate-en {
                  top: 10px;
          }
}

You can use top and media queries to move the button vertically in different devices.

Have you tested this on Safari?
kostasx 8 months ago
Yes. The top property is compatible across all browsers.
fabian muema 8 months ago
Yes. I was referring to the result in the browser. By applying the above code in Safari, the centering of the buttons breaks.
kostasx 8 months ago
Have you tried changing the measurements as needed? And the above code should not replace the existing code but is rather an addition to your code.
fabian muema 8 months ago
Well, I was just curious about the result on your side. I guess @fifo can check on their side and let you know about the result they're seeing.
kostasx 8 months ago
Thanks for your response @fabian_muema, Though this does make it centred, It thickens the one on safari/iphone. It used to same before, not sure what changed/broke that now it's showing different on different browsers.
fifo 8 months ago
Sorry, cut that, after checking on an iphone, I can confirm it moves the button way up and is not centred anymore. Thanks though!
fifo 8 months ago
Unfortunately this solution didn't work, but since it was the first answer I paid it out to you. Thank you for taking the time to answer! The solution was to actually add a min-height to the nav bar itself.
fifo 8 months ago

My solution uses basically the same solution as Fabian, but I packed it into a small script so it would only run on Android devices.

if(navigator.userAgent.includes("Android")) {
    var androidFixCSS = `
@media (max-width: 768px) {
    .mobile-menu-bar { top: -15px }
    #et_mobile_nav_menu .donate-en { top: 10px }
}
`
    var elem = document.createElement("style")
    elem.innerHTML = androidFixCSS
    document.body.appendChild(elem)
}
Hi, thank you for this, where would I implement this code? Also, keeping in mind it's not only android devices, the problem was on Chrome in desktop and firefox as well when shrinking the browser down to mobile size.
fifo 8 months ago
View Timeline