CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queriesnexus-5
Fortega
Fortega

Reputation: 19682

Website looks strange on mobile phone

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:

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

Upvotes: 0

Views: 2637

Answers (2)

MiguelIto
MiguelIto

Reputation: 21

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.

Upvotes: 2

Le-roy Staines
Le-roy Staines

Reputation: 2057

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

Upvotes: 2

Related Questions