I have a Joomla 3.9x website with a custom responsive menu. Each menu item in the top level has a pseudo ::before element displaying icons from a custom font. If the item is a menu separator, then the separator (enclosed in a span) is followed by a button which has its own ::after element displaying either + or - depending on whether the hidden menu is displayed or not. On Windows 10, iPad and Android, these button ::after elements are correctly lined up. On Amazon Fire (v8, 10th Gen) the symbols are too high. I have no idea if there's any way to inspect the page on Fire tablets. Here are a couple of screenshots and I'll give some of the html and css below them.
This is as on Windows 10:
This is Amazon Fire Tablet:
<ul class="menu-b">
<li class="item-129 single divider deeper parent">
<span class="separator icon-life-events">
::before
Life Events
</span>
<button class="btn-level-1" type="button" aria-label="Life Events">
::after
</button>
</li>
</ul>
This is the CSS:
.menu-b {
display: -webkit-flex;
flex-direction: column;
justify-content: normal;
margin: 0 0 1rem;
padding: 0;
position: relative;
top: 0;
overflow-y: auto;
}
.li {
display: block;
position: relative;
line-height: 1.5;
border-top: 1px dotted darkgray;
margin: 0;
padding: 0.5rem 0 0;
}
.li span {
color: darkgreen;
display: inline-block;
font-size: 1.1rem;
padding: 1rem 0;
position: relative;
text-decoration: none;
white-space: nowrap;
}
[class*=" icon-"]::before {
font-family: 'myfont';
font-size: 1.5rem;
position: relative;
top: 0.35rem;
left: -0.5rem;
}
}
button {
position: relative;
background: transparent;
border: none;
display: inline-block;
height: 2.5rem;
margin-left: 0.5rem;
outline: none;
padding: 0.75rem 0 1rem;
top: -0.25rem;
width: 20px;
}
button::after {
display: inline-block;
width: 0;
height: 0;
margin: 0;
content: "+";
color: darkgreen;
font-size: 1.35rem;
transition: all .3s ease-out;
position: absolute;
left: 0;
top: 0;
}
I have tried different heights, padding, margins on different elements but it just doesn't want to display as I want it on Amazon Fire.
Any suggestions gratefully received.