I was wondering how you approach the media queries. Lets say you do mobile first, do you set the margins for the small devices directly without a media querie and then overwrite it inside a media query for desktops later if needed?
Or is there a better way? Thanks for help.
Greetings Martin
Personally I always do mobile first because I find it easier. With mobile devices, you don't really have to move things around a lot because most of the time you'll only need a single column layout, which is the default in the html.
This means that the overall mobile layout can be achieved with little code. However, if you do desktop first, it most likely you'll take some elements out of the document flow(using positioning or floats) and it will be needlessly challenging to get them back once you're making it responsive to mobile.
New work here guys, I had an issue with setting up the Mobile drop-down menu. Any heads up will be appreciated. :)
Hey man, your solution looks really awesome! Nice work. A few minor suggestions: I noticed that on mobile, the page is scrollable to the left. You might want to avoid that by setting the overflow-x property of the page container to "hidden". With regards to the mobile navigation, here's a link to a Repl that explains how you might do it. https://replit.com/@AmosSenkao/practice-2#index.html
Ok so CSS is so frustrating....Could any of you help me in working with background images and using grid properly...?
Your solution looks great! I however noticed that when I swiped left, the page scrolled horizontally and I was able to see the navigation bar, even though it was supposed to be hidden until I clicked on the hamburger icon. One way to solve this is by setting the overflow property of the navigation bar's parent container to hidden. Like this:
.container { overflow-x: hidden; }
