Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile first, pure CSS

Mallory 120

@azerroth11

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How do I make it so that I don't need to use !important in my computer version when creating mobile first ?

I did mobile first. So my stylesheet links look like this:

<link rel="stylesheet" media="screen and (min-width: 768px)" href="./css/style.css"> <link rel="stylesheet" href="./css/mobile.css">

Community feedback

Cian 80

@ciandm

Posted

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

@azerroth11

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord