Lay Buttons: labels off-centered depending on used browser ...

fabiandraxl

Created this new site and I noticed, that the button labels are vertically misaligned i.e. off-centered ... i believe it has something to do with the integration of Adobe Fonts ... could it be that the browsers use different font files or something like that? I know that browser interpret and render fonts differently but something like that never happened before with any of my other lay-sites.

Safari Looks fine, Mobile and Desktop:

Bildschirmfoto 2023-10-24 um 02.38.25.png

Firefox Desktop and Mobile is broken:
Bildschirmfoto 2023-10-24 um 02.38.52.png

Chrome Desktop is fine, Mobile is broken too.

Could you please help me soon? :) Thank you, Fabi

arminunruh

dont know why it happens!

https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent

<script>
if (navigator.userAgent.includes("Firefox")) {
document.body.classList.add("firefox");
}
</script>
<style>
.laybutton2{
padding-top: 13px!important;
}
</style>

:)

fabiandraxl

@arminunruh

I added the following to my custom <head> content:

<script>
  if (navigator.userAgent.includes("Firefox") || navigator.userAgent.includes("Android")) { document.documentElement.classList.add('offcenter') }
</script>

And Custom CSS:

.offcenter .laybutton1, .offcenter .laybutton2 {
        padding-bottom: calc(10px - .5ex) !important;
}

It works, but what is about Chrome Mobile, Samsung Browser etc ... any Ideas?
What about the "no-chrome-no-safari" u are using in lay?

arminunruh

It works, but what is about Chrome Mobile, Samsung Browser etc ... any Ideas?

you need to find out the navigator.userAgent in javascript with these browsers and create custom css / js

What about the "no-chrome-no-safari" u are using in lay?

i dont understand your question

Lay Theme Forum

Lay Buttons: labels off-centered depending on used browser ...

Before you post:

When you post:

Online Users