Responsive site works on desktop but not mobile

1 Views

I’m working on developing this responsive WordPress site: http://www.allisoncassels.com/Test/ and having a problem with my media queries.

I coded the CSS for the following breakpoints:

Read More
/* Portrait Tablets */
@media only screen and (min-width: 768px) and (max-width: 959px) 

/*  Portrait Mobiles */
@media only screen and (max-width: 767px) 

/* Landscape Mobiles */
@media only screen and (min-width: 480px) and (max-width: 767px)

On desktop, everything looks great. On my phone and tablet, some things are mobile and some things are still showing like the desktop (stuff I have display: none on is showing, div widths are off, etc.)

The only thing I can figure out is that it’s related to my phone/tablet being retina display, but I don’t see other sites having to factor that into their calculations…

Really baffled right now, I’ll appreciate any help. Thanks

Post Views: 1

Related posts

Leave a Reply

5 comments

  1. Put this in your head!!! 😛

    Inside the meta tag.

    name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″ />

    Cheers,
    Mark

  2. You should add this meta

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

    Try this media query for iPhone 6/6 Plus and Apple Watch CSS media queries

    @media only screen and (min-device-width: 375px)
 and (max-device-width: 667px)
 and (orientation: landscape)
 and (-webkit-min-device-pixel-ratio: 2)
 { }

    iPhone 6 portrait

    @media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{ }

    iPhone 6 Plus landscape

    @media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 3)
{ }

    iPhone 6 Plus portrait

     @media only screen 
and (min-device-width: 414px) 
and (max-device-width: 736px) 
and (orientation: portrait)

    and (-webkit-min-device-pixel-ratio: 3)
    { }

    iPhone 6 and 6 Plus 

      @media only screen
  and (max-device-width: 640px),
  only screen and (max-device-width: 667px),
  only screen and (max-width: 480px)
   { }

    Apple Watch

      @media
  (max-device-width: 42mm)
   and (min-device-width: 38mm)
  { }

    For Image responsive

    img {

   max-width: 100%;
  }

  3. This wordpress theme Avando is already responsive:

    http://themefurnace.com/themes/?theme=Avando

    you don’t need to create some additional css

  4. Update

    My web host’s server was crashing while I was working last night and I think that was affecting the files being properly propagated… All the responsive code works perfectly today.

  5. Try adding a color css border around elements that are not displaying correctly, border:thin red solid; or change the background-color to figure out if you css selector is being used. Also, it will be usefull if you put in links to the page and point out the elements you are having issues with and the device/device browser you are testing on.