@AlexBueckig
Posted
Hi nlefty,
Your solution looks great. As you already mentioned, there is one slight issue with your media queries. Your content starts to overflow and creates horizontal scrolling starting from 960px. One thing that'd get around the issue quite easily is to set your current breakpoint to something like 970px. Furthermore you can then add a max-width: 600px; with a margin: 0 auto; to your .wrapper class for the mobile part. And if you don't like your elements being pushed all the way to the corners of the viewport, just add padding: 0 1em; to your .wrapper aswell. That should make it, hopefully... 😃 Didn't test it myself, just went through it in my head real quick. 😇
And I saw you are using a desktop first workflow! How about trying to use mobile first for your next project! 😃 It's the preferred workflow nowadays because it makes mobile devices load less style-information which is better for optimization purposes.
Another advantage is that you don't have to use any special layout tools for mobile, you can mostly just use block level elements which is the default behavior. That means that you have to reset way less code when doing the desktop parts of your layout in your media queries later on. Less code means less work and better maintainability in general. 😇
@nlefty
Posted
Thank so much for your input @AlexBueckig. I'm def going to play around with what you suggested, especially for my next project to try mobile first!!
