Dear community,
when I create a badge using the element my badge goes over the page (disappear half of it) when I increase the screen-size after 1024px. But the only media querie that I have before this rule is to change the font-size and by coincidence is 1.8rem.
.badge {
font-size: 1.8rem;
background: gold;
border-radius: 30px;
white-space: nowrap;
padding: 1rem 3rem;
font-weight: 700;
}
Hi,
Use dev tools to investigate that. There is a computed style that has all you did not define yourself.
It is difficult without the project itself.
span are inline block by default. Now I had in mind any position:relative but that is just a guess.
Hi,
I checked and there is no padding or margin so I don’t really get why it is going above the height of the page.
The larger the padding the larger the area goes above the height of the page.
When I set the badge to display: inline-block then it gets corrected.
