Is max-width in media query not enough?

[Marco16168]

Hello fellow campers,
as I’m about to finish the Java Script module here at fCC, I’m revisiting my Responsive Web Design projects before approaching the Front End Development libraries certificate.

I think I’m more confused now about media queries than I was back then when I was doing the RWD projects.
Let me explain.

I’m not a big fan of large-screen phones (right now I have a 2016 iPhone SE), so I’ve always tested my media queries with the web developer tools on my laptop running Firefox, just resizing the simulated screen area (which now I think was not the way to do that).
Also, trying to visualize my projects from my phone in Codepen is an absolute nightmare, so I never really checked them from my phone.
The point is, I’m realizing these days that my projects really don’t look good on a small screen.

I’d like to fix that, but I don’t understand one thing: activating/deactivating touch simulation changes the appearance of the page dramatically, in general elements are much smaller than I intended them to be.
Have a look at the pictures, it might be easier to understand what the problem is.

I’ve read in some threads here stating that there are some quirks in how Apple devices or Safari handle these things, but I see the same issue simulating other brands’ devices (using web developer tools).
So how should one handle this? Two types of media query, one for the screen size and one for the device type (touch / no-touch)? This looks like a nightmare to me.
Am I missing something here? Please enlighten me.

On a related topic, do you guys use some easy-to-set-up method for visualizing your web pages on multiple devices while you’re working on them (without owning a domain)?

Thank you, and sorry for the long, moaning post.

[bbsmooth]

Can you provide us with a link to this project so we can test this for ourselves?

[lasjorg]

The only way I can get that to happen is if I do not include the viewport meta tag in the head.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Which you should always have.

https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

[Marco16168]

You’re right:
https://codepen.io/marco1618/pen/abZdEap
or here:
http://theo-jansen_tribute-page.surge.sh/

[bbsmooth]

@lasjorg

The only way I can get that to happen is if I do not include the viewport meta tag in the head .

Looks like you win!

@Marco16168, add that meta viewport tag.

[Marco16168]

I don’t understand. I mean, I’m going to check your link soon, but was this something covered by the RWD courses? Looks like something new to me. Maybe I’m not recalling correctly.

[Marco16168]

Anyway, thank you big time. That does solve the issue and my headaches.

[lasjorg]

No, I don’t believe it is covered anywhere in the curriculum, which is a mistake in my opinion.

The RWD section of the curriculum is honestly just a bit lacking. We do have some good videos on RWD on the fCC YouTube channel though.

I’m to blame just as much as anyone (anyone can contribute to the curriculum). I did at one point consider updating it but the “next” version of the curriculum was always around to corner, and updating things got less and less something that seemed worth the effort. It’s also not an easy subject to teach properly and would take a fair bit of work to implement.

[Marco16168]

Yeah, I get it. I honestly think that this is an awesome platform to learn to code from and that these sorts of issues are perfectly normal, given also the fact that the subject is prone to continuous changes.

It’s just that yes, the trick you showed me looks like something fundamental in a Responsive Web Design course.
But again, you guys have done fantastic work here at fCC, and I don’t think that we should talk about blame.

Thank you again