Website looks strange on mobile phone

Question

My website looks strange on my Nexus 5 (see image below). Although I cannot test it, I guess this is the same for other mobile phones. I guess this is because of the @media queries. However, if I try this on a normal pc with different screen widths, it looks like it should be.

Two questions:

how can I fix this?
Is there a way I can test this behavior on my pc, so I can use firebug to see the css?

This is how the @media queries look like in my css file:

@media (min-width: 600px) {
  .col-lg-3 {
    width: 50%;
    float: left;
  }
}

@media (min-width: 900px) {
  .col-lg-3 {
    width: 33.33%;
    float: left;
  }
}

@media (min-width: 1000px) {
  .col-lg-3 {
    width: 25%;
    float: left;
  }
}

@media (min-width: 1000px) {
  .container {
    max-width: 980px;
  }
}

The .container is the white box with the shadow, and the .col-lg-3 are the product boxes (4 in a row on a normal screen). The .container should fill the screen on small screens, and be 980px wide on a big screen. However, it looks much smaller, and it looks like the .col-lg-3 has a width of 100%

enter image description here

look at viewports, https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag — zazvorniki, Sep 17 '14 at 20:45
you shoud realy rework your html markup... try window resizing ans see whats going on... there are several problems to slove... begin with your navigation... the navigation isn't responsive and the positioning is horrible. — Steven Web, Sep 17 '14 at 20:53
I don't really care about the navigation bar at the moment. I only want the big white block with the shadow to fill the screen... — Fortega, Sep 17 '14 at 21:00

MiguelIto · Answer 1 · 2014-09-17T21:02:42.463

2

Chrome has very good emulation tools for mobile built into the developer tools. See https://developer.chrome.com/devtools/docs/device-mode

The sub menu UL have defined widths also so this may be causing the menu bar to be forced wider that the container. Check the whitespace of the menu text as well.

edited Sep 17 '14 at 21:02

answered Sep 17 '14 at 20:51

MiguelIto

21
3

Nice to know, thanks. Although the problem is not visible using device mode... -[edit]- I don't really care about the navigation bar at the moment. I only want the big white block with the shadow to fill the screen... – Fortega Sep 17 '14 at 20:59

score 2 · Accepted Answer · answered Sep 17 '14 at 20:57

To elaborate @zazvomiki you can correct this behaviour by implementing the viewport meta tag and specifying that the viewport width should equal the width of the screen. Place the following in the element of your web page:

<meta name="viewport" content="width=device-width, user-scalable=no">

To answer the second part of your question can you test this behaviour on your PC you can use remote debugging with Chrome for Android which allows you to use developer tools from your PC to investigate the page on your phone. Then you can make live changes as you normally would in Chrome to test different ideas.

Remote debugging for Chrome: https://developer.chrome.com/devtools/docs/remote-debugging

Website looks strange on mobile phone

2 Answers2