I have been working on Bootstrap and I am facing an issue with the positioning of two badges. Currently, one badge appears on the right side and the other on the left side.
Although I tried adjusting the left property, it causes overlapping when the size of the first badge increases, especially in mobile view.
If anyone can provide guidance on what I might be doing wrong, I would greatly appreciate it.
Below is the CSS code for the badges:
.available_badge {
left: 0% !important;
}
.badge-multilet {
left: 0px !important;
}
@media screen and (min-device-width:320px) and (-webkit-min-device-pixel-ratio:2) {
.badge-multilet {
right: 0% !important;
left: inherit !important;
}
.available_badge {
left: 0% !important;
}
}