P
Carlos Pizarro• 100
@IncorrigibleSpirit
Posted
Hi @HamzeKabi! How's it going?
Great job! I had the chance to review your code, and I must say that you have implemented a really clean and semantic HTML structure. Also, I noticed that you are using Sass to enhance the way you control the properties and values.
A bit of friendly constructive feedback:
- As you suspected, there is a rule that takes priority over the one in your media query. You can check the "specificity" of your rules using developer tools like Google Inspector.
Specificity: (0,1,1)
main .image-omelette {
width: 40rem;
max-width: 100vw;
margin: 0 0 5% 0;
}
Specificity: (0,1,0)
@media only screen and (min-width: 376px) {
.image-omelette {
margin: 5%;
border-radius: 1rem;
}
Which options do you have to increase specificity on the media screen?
-
Adding more class selectors or an ID increases specificity. For example, using: main .image-omelette {....}
-
Nesting selectors more specifically also increases specificity. For instance: main .recipe_container .image-omelette {....}
I hope my comment can help you to resolve your question.
Happy Coding!
0
