
Responsive page using Media Querry and Mobile First techniques
Design comparison
Solution retrospective
First time i used the mobile technique, it is pretty useful. I would like to pay more attention to small details.
What challenges did you encounter, and how did you overcome them?I had problem with the responsibility, but i tried some recourses to fix it.
What specific areas of your project would you like help with?I would like an overview of the code and what i should study.
Community feedback
- P@huyphan2210Posted 2 months ago
Hi, @MatheusPolletti
I've seen your solution and your questions. I'd like to share my thoughts:
1. Ensuring the Body Fills the Viewport
To ensure a consistent layout and proper centering of elements, make sure the body always fills the entire viewport. The viewport is the visible area of a web page in the browser, and using
min-height: 100vh
ensures that thebody
occupies at least the full height of the browser window, regardless of the content size. Here's an example:body { min-height: 100vh; /* Ensures the body spans the full height of the viewport */ }
This approach is particularly useful for creating layouts where you want elements to stay centered or when building sections that need to stretch fully across the screen.
2. Familiarizing Yourself with Browser DevTools
If you haven’t already, I strongly recommend getting comfortable with Browser DevTools. These tools are indispensable for front-end development. They allow you to:
- Inspect and debug your HTML and CSS.
- Identify and resolve layout issues quickly.
- Experiment with styles and test changes in real time.
DevTools can also help you better understand how your CSS rules are applied, especially when troubleshooting issues like specificity or inheritance.
3. Tips for Responsive Design
To further improve responsiveness, consider leveraging modern CSS functions like
clamp()
,min()
,max()
, andcalc()
. These functions, when combined with relative units such asrem
,em
,%
,vw
, andvh
, help create fluid layouts that adapt seamlessly to different screen sizes.For example:
h1 { font-size: clamp(1.5rem, 2vw, 3rem); /* Adjusts font size based on viewport width */ }
Integrating them alongside properties like
min-height
ormax-width
can make your design even more flexible and adaptable.Hope this helps!
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