@jomefavourite
Posted
Great job, I like the work and here are my feedbacks
-
Making use of the
%
unit to determine the overall width, usingmargin
andpadding
of each section, without includingmax-width
property will make the layout to keep growing on large screens. -
Adding a
max-width
property to the texts on the page will be very helpful, so as to stop the texts from growing at a certain point. -
The model with the selector
.access
, I noticed it isn't always centered so I made some changes.
.access {
padding: 5% 5%;
box-shadow: 3px 3px hsl(0deg 0% 5%);
height: auto;
width: 80%;
max-width: 700px;
/* margin: -10% 21%; */
background-color: hsl(217, 28%, 15%);
position: absolute;
margin-top: -110px;
left: 50%;
transform: translateX(-50%);
}
Also on the media query
@media (min-width: 320px) and (max-width: 500px)
.access {
/* margin: -2% 5%; */
padding: 1.5rem;
width: 90%;
}
Lastly, I'll like to talk about the percentage unit you used frequently on margin and padding, it might cause issues as the viewport increases so I'll advise you make use of other responsive units like em
, rem
.
Then on the width
of each sections, you can use percentages. Well, it varies and depends on the use case.
Here's an article I wrote that might be helpful.
Also, I'll strongly advise you take this course Conquering Responsive Layouts by Kevin Powell.
@amarealcoder
Posted
@jomefavourite Thank you very much for your sincere and wholistic feedback. I struggled with making the sections keep their respective layout. I never knew what the real problem was. But now I know, thanks to you.
@jomefavourite
Posted
You're welcome@EagleNerd