Day 6 - Media Queries The Right Way

Road to Becoming a Front End Web Dev

ยท

2 min read

Picking up where I left off yesterday I was able to redo my media queries to fit a screen size of 770px. At the 770px mark is when my layout starts to collapse into a mess so I decided to start my media query at this mark to accommodate anything smaller. My first attempt with media queries was decent but didn't resize my image container and just slimmed my paragraph tag text to fit into the width of my 3 columns.

The re-writing of my media queries was able to keep my images in the center of their respective borders while only slimming the container down just a bit for a more nicer look on smaller screens. I also formatted my paragraph tags to be center with a lot more breathing space when it comes to the width and to take up one row at a time. The footer section didn't need any adjustments since it retained its position and size on smaller screens.

Screen Shot 2021-06-10 at 00.54.24.png

Screen Shot 2021-06-10 at 00.54.43.png

Screen Shot 2021-06-10 at 00.54.48.png

I do have some more work when it comes the the middle tittle section, I only realized while writing this article the spacing should probably be a little less for a smoother transition from the image container to the paragraphs.

I purposely left my navbar for last since I would like to use this opportunity to design my first hamburger menu! I did review some code pens on basic hamburger menus just to get an idea of what is needed for this part of the project, and I got to say it looks tough. Even though it looks intimidating that's the part that excites me, knowing once completed I will have the ability to make a hamburger menu and implement with any project, I will also be learning new tricks during the whole process. With that being said

Stay Tuned...

ย