Hi, so I am trying to put media queries on my specifically working this page right now. I am also using google chrome inspect element viewport rendering to view the iphone responsiveness and everything looks aligned but when I look at my page on my phone one of the products image link is off…
CHROME:
iPHONE:
It actually did work in terms that now I am able to see what im saying in phone in google chrome…I just need to adjust the css… but now it has a desktop layout form…if in the future I developed and app or mobile version will still need to use max-width?
I’m not entirely sure that sentence makes sense lol.
Either way even if I resize my screen on my desktop, it doesn’t seem to change how iphone renders it. This products page doesn’t seem to resize accordingly? Scrollbars are everywhere.
Depends on the situation. In general (Paul here happens to do what I do) is that I code for desktop view (since it’s easiest) and then I just throw in some small media queries as needed.
Your media queries should 100% always be based on actual widths and not device-width. You’ll also 100% always need thatmeta viewport tag otherwise your mobile devices will just show you a shrunken down desktop view (basically.)
Aside - it’s shocking how many people seem to be telling people to use device-width on google. This saddens me that people don’t know what they ae doing and are giving bad recommendations.
W3schools is an absolute joke of a website. It’s only use is to remind me on syntax or something (half the time it’s wrong or outdated but it jogs my memory and I remember hte correct code.)
To paraphrase @felgall, …eh it’s funner when he rants about this. Basically the people running this site bit off more than they can chew. They can’t keep it all updated.
Device width refers to the width of the device’s entire screen irrespective of the browser window’s width . The problem with device-width is that you are chasing device widths. There are thousands of devices. It’s best to just get a good looking website over 320 - 1000px (or so) and let it be that. That’s all you need. Fighting for specific styling on devices is a losing battle.
Answered above. I could get more in depth (I just shot Sitepoint a message asking to write an article on this) but I’m not alone. @PaulOB also agrees with me on this (go figure )
The numbers probably favor mobile first because frameworks take mentality to develop for mobile and cascade upwards.
However ultimately it doesn’t matter. It truly doesn’t. Paul and I code for desktop (and I assume on his reasons) because it’s easier to code for desktop first with some max-widths in place to make it fluid and take up space where there is space.
That’ll be good until 600 or so px and then you start tinkering with the design with some media queries.
I could easily modify that to code for mobile first but I just always was in the habit of doing desktop first. At the end of the day, it’s responsive.
Tl;dr, “a lot” of development is mobile-first because of frameworks probably.
This page is a mess. Ok first of all, make your .outer_wrapper a max-width and not a width.
Then on your .history and .history2, remove the widths and the padding. We need to cleanthis page up and this goes beyond fixing that paragraph tag. Not sure why you set widths and huge padding on these elements but remove that.
A good point, likewise I prefer to develop for desktop first, for simplicity sake. I guess, it would depend on whether the target audience base is more mobile device inclined. I always think there’s an app that can do it better when it comes to most mobile web stuff. Having said that you are right, nearly all of the latest frameworks start at mobile and work up.