Kevin Powell - Community•2y ago

Is there a way to pre-call font-sizing ?

.searchBar{
    --searchBarHeight: 50px;
    height: var(--searchBarHeight);
}

.searchBar__icon{
   background-color: var(--colorBackground);
   font-size: 16px;
   padding: calc((var(--searchBarHeight) -           12px) / 2 );
   border-radius: 10px 0 0 10px;
}

.searchBar{
    --searchBarHeight: 50px;
    height: var(--searchBarHeight);
}

.searchBar__icon{
   background-color: var(--colorBackground);
   font-size: 16px;
   padding: calc((var(--searchBarHeight) -           12px) / 2 );
   border-radius: 10px 0 0 10px;
}

Here what i want to do is to center my icon in the searchBar like in the attached image. To do so, i had to inspect the page to find that it was 12px per 12px (despite font-size being set to 16px) and add a padding equal to half the searchBar heigh minus the icon size. I'm trying to minimise my code so i don't want to use a container to center it. Is there some properties allowing font size and position controll to do similar things ?

7 Replies

b1mind•2y ago

Would help if you made a codepen to see the markup too but I would just not set heights and set padding based on rem grid to center 😄 https://codepen.io/b1mind/pen/dyKpXWE

Xero'•2y ago

yeah i see, better if i just avoid messing with fonts ^^

MarkBoots•2y ago

also font-width is not a thing

Xero'•2y ago

font-size ^^, edited

b1mind•2y ago

More so its better not setting heights heights restrict you greatly in layout design. Its better to let content control the height or use min/max values So rather let the font-size + padding determine the overall size 😄

Xero'•2y ago

Ok, i suppose it is to avoid overflowing content and help with responsive ? Well thank you for the answers 😄

b1mind•2y ago

You're welcome

Gaming

Programming

Is there a way to pre-call font-sizing ?