Media Queries Responsive

HTML & CSS
1

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:

This is what I got

/* Iphone 6 */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 


{
    
.history2{
    padding-left: 60px;
    padding-top:120px;
}
    
.history2 .space{
	line-height:20px;
}    
    
#tilt{
    margin-left: 505px;
    margin-top: -165px;
    margin-bottom:205px;

}
    
.history{
	margin-top:50px;
}	    

}
2

Go by max-width not by max-device width. Then add this line into your <head> section. See if that fixes the problem.

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

You should be ignoring hte fact that mobile devices are devices. Treat them like you would a desktop. Never media query for device widths.

Untested but it should work. Or at least you’ll be at a better place than you were before.

3

Nope that didnt fix it…

Is the reason also because CSS3 uses that code as well?

4

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?

5

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.

6

Oh ok so it did work :stuck_out_tongue: .

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.)

7

Well CSS3 Media Queries uses max-width and min-width right? because I found the this site that uses max-device-width

8

That site is wrong and they should be pistol whipped (kidding). Have I ever steered you wrong :wink: ?

I’m teaching you the best practices. You’ll be fighting a neverending losing battle if you go after device widths.

9

lol no. I see ok.

10

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.

2 Likes
11

So what is device-width?

Too bad w3schools doesnt teach you to put that meta tag first…

But you would do this if you were not developing an actual app right?

12

I’ll shoot, what are the differences and why?

13

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.

1 Like
14

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 :stuck_out_tongue: )

15

I don’t develop apps so I can’t comment. I’d rather users just view a mobile responsive version of my website, rather than an app.

2 Likes
16

Interesting, I remember reading that a lot of development happens with mobile first, is this not the way to go? Why or why not?

17

I noticed my <p> goes all the way across in phone but chrome does not do it…

Phone:

750×1334 168 KB

Chrome:

331×567 27.1 KB

18

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.

19

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.

20

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.