Design comparison
Solution retrospective
Proud of adding the responsive design for mobile screens.
Next time I'd like to look into a less repetitive way to handle it.
What challenges did you encounter, and how did you overcome them?Finding the correct syntax for handling different media sizes. Google was a handy resource to figure it out.
What specific areas of your project would you like help with?There is most likely a less repetitive way to handle a mobile screen size than what I did. Do you know of a way or do you have a link to a resource I can read up on?
Community feedback
- @MunibAhmad-devPosted 5 months ago
Great job on your solution! For handling mobile screen sizes in a less repetitive way, I recommend using CSS media queries. Media queries allow you to apply different styles for different screen sizes, which helps to avoid repetitive code. You can read more about them in this comprehensive guide from MDN Web Docs: Using Media Queries.
Define Breakpoints: Identify the screen sizes you want to target (e.g., mobile, tablet, desktop). Write Media Queries: Use the @media rule in your CSS to apply styles based on the screen size. For example:
css Copy code /* Default styles for mobile */ body { font-size: 16px; padding: 10px; }
/* Styles for tablets and larger screens */ @media (min-width: 768px) { body { font-size: 18px; padding: 20px; } }
/* Styles for desktops and larger screens */ @media (min-width: 1024px) { body { font-size: 20px; padding: 30px; } } here you go ' https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries."
Hope this helps!
0
Please log in to post a comment
Log in with GitHub
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