CODEWITHSUNDEEP
cssmobileresponsive-designmedia-queries
user5365562
user5365562

Reputation:

Media Queries working on Desktop browser but not mobile device

I'm currently working on making my portfolio site responsive. My media queries seem to be working on desktop but as soon as i look at it on mobile (iPhone 4) things get out of whack.

Here's a picture of how it appears on my iPhone 4

iPhone 4 Web View

For some reason the background seems cut off even though the media query width should cover the device, and also my mobile nav hasn't loaded in. I've been looking into this for a few hours and still cant seem to find the problem.

Here's the relevant code:

HTML

<meta name="viewport" content="width=device-width" />

(I tried setting the initial scale on this as well and it only made things worse)

Here's how I'm calling the query with CSS

CSS

@media only screen and (min-width:400px) and (max-width:499px) { 

}

I have other breakpoints as well, but this is the smallest one

Here is the live site in action so you can see the difference between the desktop and mobile versions

Upvotes: 1

Views: 4663

Answers (2)

Sheraz Ahmed
Sheraz Ahmed

Reputation: 909

try adding this to your header. 

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

instead of the viewport you've added. if this doesn't work, one of your element must be taking more space than the screen size itself (see if you can scroll left or right).

Edited 10 mins later I just Checked, this is the Issue, try adding 

#car{
width: 100%;
}

as well and you'll see the difference, you need to adjust the font sizes and more. I'm guessing you've just begun with web development?

Upvotes: 2

dippas
dippas

Reputation: 60603

because you are setting a min-width:400px on your last media-query, which mean than any device under 400px will be having the regular CSS you set,

Solution:remove min-width:400px or create another media query.

I would advise you, to not use min-width and max-width in the same media query, it will make you to write more code.

So, either

  • use the mobile approach, which is using only min-width

or

  • use the non-mobile approach, which is using only max-width

with those option your queries will be have less code than your first option you are using now.

Upvotes: 1

Related Questions