Did anyone else come across the problem, that your website isn’t functioning as intended in one of the above mentioned tools?
So, my website is as responsive as I could make it to be and in CodePen works just fine… but when I check in the Chrome DevTools Responsive layout, media queries don’t work. Mostly when trying offline version of files.
If so, how did you get past this obsticle?
What does this mean exactly?
Maybe this will help.
The best method to ensure that your page is mobile friendly is to use a narrow-first approach when creating your page. At the very beginning of the process, narrow your browser as far as it will go and style the page so it looks good at that narrow width (no horizontal scroll bars). You are not using any CSS break points at this time. You will most likely not need a bunch of fancy layout code (using flexbox or grid) because for the most part you’ll want everything to naturally stack on top of each other in a single column (such as the three bag boxes at the bottom). Your CSS will be rather simple at this point, and that’s OK. This will be your base CSS.
After you have your page looking perfect in this narrow view then you can gradually widen your browser until you feel you have enough horizontal room to move things around for the wider view port. This is when you will set your first CSS break point (place it after the base CSS). Use min-width and em units for the break point. Add any styling changes for the wider layout inside the break point (e.g. adding flexbox/grid to move things around). Repeat this widening/adding break points process as needed.
There’s also an icon in your dev tools that gives your page the dimensions of a phone. Choose inspect, You can find it on the left hand side next to elements and when you hover over it you read toggle device toolbar. You can choose different formats and brands.
And yes, it’s a big pain, however much I work at it there’s always some device that doesn’t represent the page the way I’d like it to.
Yes, that’s clear to me. Although, when Ichoose the Responsive version of representation, the media queries don’t seem to work in DevTools. I will try some more.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.