Hye @Clinged1 what a great job using random units (rem, em. %, px). Your design looks Good In general.
Straight to the point , rem, em, % are relative units that means they changes with some predefined settings
px is a fixed unit . It quite doesn't change whatever settings or media queries (mobile, tablets, desktop) the element is shown of.
You may consider using px to define:
-
height of your navbar e.g:height:50px
-
width and height of some input(input checkbox, input radio) e.g width:12px; height:12px
-
height/width of a side image in your project you may want it keeps the same size whatever devices the <img/> are shown e.g width:100px; height:70px
You may consider using em to define:
-font-size for child card element . when the unit em is used as font-size . It actually take size according to the parent element font-size;
- let's see this piece of code:
<div class="card_box">
<div class="card_content">
...
<div class="mini_label"></div>
</div>
</div>
.card_content {
font-size: 1rem; // 1rem = 16px
}
.card_content .mini_label {
font-size: o.65em; // 16px * 0.65 = 10.4px
}
-width, height, padding . On these case the value are calculated using the font-size of the said element concerned
In the previous example . if we do :
.card_content {
font-size: 1rem; // 1rem = 16px
padding : 0.5em; // 0.5 * 16px = 8px
}
You may consider using rem to define:
layout of main div or section or card_box
.card_box {
width: 10rem;
height: 8rem;
}
rem unit size depend on the :root unit size.
:root {
font-size: 15px;
}
.card_box {
width: 10rem; // 10 * 15 = 150px
height: 8rem; // 8 * 15 = 120px
}
Even if you done define a :root size is good to now that actually it has a preset default size given in the project.
If using the IDE VsCode you go to File > Preferences > Settings then type font-size you might see the default set font-size for all your projects.
You may consider to use % to define:
large layout . as % take rescale with the vw (viewport unit) of the parent container element
section {
width: 100vw;
}
.recipe-page-ingredients {
width: 70%;
}
as section is the direct parent of the div element with class .recipe-page-ingredients . Writing width:70% will be the same as writing width:70vw , but with this effect that the child size is determined by the direct parent element size. This controls allow to avoid box overflow at some point.
I hope all that makes sense , and could be relevant for your approach of units size
Thanks you for your time , and your patience while following this writing.
I also wish happy coding to you wherever you may be @Clinged1. Keep moving forward you have really a sense to a better understanding of CSS. And you will make it soon.
