Responsive landing solution using media queries & grid

Community feedback

• 

  Ngouend raoul Gerard•560

  @BeinRain06Posted 11 days ago

  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.

  0