@deeola
Posted
Good Job John, Clean design and really awesome effort.
About your question about Media Queries, what i would do is to start by wrapping my boxes in a container div(you can also use your main too like you did ). My next step would be designing at about 315px (Mobile-first), then add breakpoints at about 481px for tablets and 769px for desktops(and display the container div as flex at this point). So, instead on using max-width with your media-query, you are going to use the min-width property.
Overall, it's a very awesome design.
Welcome to the frontend community bossman.
@johnayanyemi
Posted
@clazikar Thanks a lot for the feedback
I'm happy to be here
@johnayanyemi
Posted
@clazikar Hi there! I've implemented the changes now, please do check it out
@johnayanyemi
Posted
@clazikar Hi there! I've implemented the changes now, please do check it out
@deeola
Posted
@johnayanyemi
Great Job once again.
I observe that on your mobile view, you attached display:flex to some elements (Like, main.container and div.box)that are not neccessary(writing fewer css is one of the advantages of coding mobile-first)
Another observaton is that your boxes are not responsive below 768px and that is because you have a max-width set on the boxes. So try and remove the max-width property on div.box, add a width of 100% and on your main.container, you can have a width of 90% or less(depends on you ) and set a 'margin:2em auto;' on it. This gives your .box container the same with as the main.container and shrinks according to that.
On your media query
--you can remove the 'flex-property:row' since it will be in row by default.
--Adding another set of padding to the main.container is disturbing the height of the middle box, Try and delete it. makes the box perfect at exactly 768px.
Don't be discouraged by these few corrections(they're minor fixes). You've done a great job.
P.S Check Kevin powell videos on height and width on youtube. It'll really help.
@johnayanyemi
Posted
@clazikar Thank you, I can't appreciate you enough, I'd go over it again
