@MunibAhmad-dev
Posted
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!
