While working on my webshop, I encountered a peculiar bug.
I am trying to create a cart "badge" for easy access to see the number of items in the cart. The badge is located within an a tag with two display: block spans inside. On desktop, the badge's CSS looks like this:
.count::after{
content: "2";
display: inline-block;
background: #FF0000;
border-radius: 20%;
padding: 0 0.5em;
transform: scale(0.7);
color: #FFF;
float: right;
position: absolute;
top: 5px;
right: 1.5em;
}
.count::after:empty{
display: none;
padding: 0
}
Everything works well on desktop as the badge displays in the upper right corner. However, on mobile, the a tag's wrapper expands to full width and using the same CSS causes the badge to fly off to the side of the screen.
So, I adjusted the code for mobile devices:
@media max-width: 990px{
...
.count::after{
position: relative;
top: -90%;
right: 0;
}
}
Unfortunately, the top: -90% adjustment doesn't work properly. When I toggle it off and on in the development tools, it functions perfectly. But upon refreshing, it reverts back to the bottom of the icon.
To see the issue in action, check out this JSFiddle: here