Design comparison
Solution retrospective
i finally did it
What challenges did you encounter, and how did you overcome them?the sizes on laptop resolution, were so hard for me, I don't think I even got it but please leave feedbacks for me so that I can grow on that part
What specific areas of your project would you like help with?the sizes and resolutions
Community feedback
- @R3ygoskiPosted 6 months ago
Hello @Ruran8wa, I noticed that you used your styling within a @media query, which is causing your CSS not to be applied on certain screens.
This is happening because you didn't define your style in the global scope but within the @media scope. In other words, if the screen size doesn't match the condition of the @media query, it won't work.
Let's take this snippet for example:
@media only screen and (min-width: 320px) and (max-width: 375px)
, Anything you put inside this @media query won't have any effect on screens smaller than 320px (which is not a problem since we use 320px as the minimum), and it won't have any effect on screens larger than 375px, which could be an issue.If anything I said isn't clear, please comment here, and I'll try to help as best as I can.
Marked as helpful0@Ruran8waPosted 6 months agoHey @R3ygoski , thank you for pointing that out; it's something I always think about when I'm using a media query, but I haven't found the solution for it yet, what do you think I should do if I want my web to be responsive, and what do you think about the sizes I used on laptop and desktop resolution?
your feedback is really really appreciated
1@R3ygoskiPosted 6 months agoHello @Ruran8wa, to make your project responsive, I'd recommend styling at the global scope, starting with mobile screens (320px or 375px). But note, this should be done outside of a media query.
Then, add a media query for larger screens, typically 1024px.
Something like this:
body { /* Omitted */ } /* Others selectos */ @media (min-width: 1024px) { /* here the effects to be applied in bigger screens. */ }
Regarding the sizes you used, establishing a scope from 320-375 (mobile) and 768-1440 (desktop) is a correct approach. However, the way you did it is too specific, leaving values between 375 and 768, and values beyond 1440 without styles.
I hope my comment wasn't confusing and answered your questions. And I thank you for your consideration. If you have any doubts, feel free to ask.
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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