Problem with Media Queries??

Hey Craig,

The site is looking pretty good so far. Remember how we were talking about using responsive units instead of fixed units, though? It is perfectly fine to have those fixed pixel units in the beginning stages of your content so that way you can position it perfectly on your screen, but you should convert them into % units after doing that so that they will scale properly.

For example, your logo image is 680px wide and 300px in height. Your media queries are set for resolutions above 768px, so at lower resolutions, they are seeing this huge 680px logo that will not fit on the screen. What you should do (if you want responsiveness) is convert this pixel value into a % value. Remember to use the formula "(target / context) * 100 = % unit", where target is your current fixed unit value i.e. 680px width and the context is the width/height of your screen resolution i.e. if your screen resolution is 1280 x 1024, your width is 1280 and your height is 1024. So, plug those numbers in "(680/1280) * 100" which equals "53.125%". To get height, we would use "(300/1024) * 100" which equals "29.296875%".

Then, you would replace that 680px width and 300px height with the responsive units you just calculated.

.logo-img {
  width: 53.125%;
  height: 29.296875%;
  background-color: red;
  margin-top: 30px;
  border-radius: 20px;
}

You should be fine with using those small margin-top and border-radius properties, though. Just remember to substitute your own width and height of your screen resolution.

If you'd like I will post the converter I made so that you can easily convert any pixel units you have to % units.

Hi Marcus,

Yes I have been working toward converting what I can with respect to % against fixed pixel. Unfortunately flex box has a couple of bugs when using % based widths and heights so im stuck between a rock and a hard place on some of the elements.

Hopefully I want my logo to be an SVG when I get round to understanding how to use that so there are no scaling issues at all. (still al little past my capabilities at the moment ...)

I am finding it very difficult to diagnose why my media queries is not taking affect when viewed on mobile devices ... :S

the break works fine on codepen and when viewed full screen in browser both chrome and IE, also I've transferred the code locally into sublime text and it works fine when resizing view port window. But when using cross browser testing and the likes I only get the desktop layout?

do you have any ideas on why this might be,

Thanks Marcus

Craig,

I'm not sure what browser you prefer to use, but both Firefox and Chrome have a very neat feature that allows you to see what any page looks like without having to resize the browser window.

In Firefox, if you press Ctrl + Shift + M (on Windows/Linux), it will go straight into "Responsive Design View" where you can pick different resolutions to view. In Chrome, if you press "Ctrl + Shift + I" to bring up the Developer Tools, and then press the icon that looks like a mobile/tablet device on the far left, and it will go into its own Responsive Design View.