Responsive Issues

[jaswinder]

hey friends

i am trying to make the website responsive.. the website shows proper responsiveness in chrome extension – Responsive Web Design Tester. but when i check it on mobile it shows a gap on right-side and also footer is bad… i made changes to css alot but not getting any result..
media queries used for mobile are

@media (max-width:480px)
@media (max-width:320px)

here is the website – http://webiworld.com/

thanks

[Paulie_D]

Not sure as it’s hard to inspect but I suspect that this is not being overriden at @media (max-width:320px)

.header_mid,.widget-area,.site-info,.content_middle,.services,.site-footer,.sidebar-container
{
    width:400px;
   }

[jaswinder]

its overriding..

[Paulie_D]

With what?

[jaswinder]

width: 240px;

[Paulie_D]

Where is that width applied?

I couldn’t see a media query for 360px.

[jaswinder]

how you checking it out ?
there is a media query for 320px..

[Paulie_D]

I’m using Web Inspector

Are you defining a width for the element in the media query…if you are, it isn’t working.

[jaswinder]

yes i am using width.
are you using the inspector in mobile device. if so how ?

[jaswinder]

i think the problem is with 480px media query..

i tried to open the website in more smaller device.. 320px is working great..

[Senff]

Things look fine on my iPhone 5.

Also, you don’t need a special extension for Chrome to test on mobile devices, it’s already built in Chrome and also takes pixel density into account: http://www.senff.com/front-end/you-already-have-a-retina-screen-emulator/

[jaswinder]

hey senff. thanks for this useful information… will you help me with that …

help me to fix this-

when i emulate it for the device Sony Xperia Z, Z1.. the website shows margin on right.. so what media query should i take ?

should i use
@media
only screen and (-webkit-min-device-pixel-ratio : 3),
only screen and (min-device-pixel-ratio : 3)

if so how pixel ratio is calculated

[Author]

Posts