Mobile first, pure CSS

Community feedback

• 

  Cian•80

  @ciandmPosted over 3 years ago

  Hi Mallory,

  I see you've used two stylesheets (mobile.css & style.css) , when in fact you only need to use one here. You should move all of your styles from mobile.css into your style.css and place it towards the top. As the name suggests, the C in CSS means cascading, which means styles towards the bottom of the file will overwrite those at the top if they have the same class name or CSS selector. Therefore, if you place your mobile styles towards the top, these will be read first. Then, to style it for desktop you should place all of your desktop files in a media query underneath your mobile styles. Something like this:

  @import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap');
  
  * {
    margin: 0;
    padding: 0;
  }
  
  :root {
    --sedans-color: hsl(31, 77%, 52%);
    --suvs-color: hsl(184, 100%, 22%);
    --luxury-color: hsl(179, 100%, 13%);
    --paragraphs-color: hsla(0, 0%, 100%, 0.75);
    --lightgray-color: hsl(0, 0%, 95%);
  }
  
  ...
  
  .cards {
    display: flex;
    flex-direction: column;
    padding: 4rem 1.5rem;
  }
  
  // rest of your mobile styles
  ...
  
  @media screen and (min-width: 768px) {
  
   // desktop styles go in here, and these will overwrite your styles above due to the 
       cascading nature of CSS
  
   .cards {
     flex-direction: row;
     margin: 0 10rem; 
   }
  }
  

  You will now no longer need to use !important to overwrite the styles and your import in your HTML can simply become:

  <link rel="stylesheet" href="./css/style.css">
  

  Hope that helps you.

  1
• 

  Mallory•120

  @azerroth11Posted over 3 years ago

  Thank you so much for your precise answer, it indeed fixed my issue and I'll make sure to do so in the future on my small projects ! It was a great help, have a lovely coding day !

  0