1

I'm trying to fit the body of my layout in a responsive style, but when i go to the mobile layout the dimension stays with the px of screen but not right on all mobile screen. Take a look at picture of the bottom, the mobile size is one and what the blue area says that is that space is different.

I saw some questions like this herer and try all that solutions but still not working.

From another question: 

html, body {
/*font-size: 40px;*/
margin:0; /* remove default margin */
padding:0; /* remove default padding */
width:100%; /* take full browser width */
height:100%; /* take full browser height*/
}

/*(set the full width window [width = device-width])*/

.content{
border-style: outset;
border-width: 3px;
border-radius: 7px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0px 0px 40px 3px rgba(199,191,199,1);
-moz-box-shadow: 0px 0px 40px 3px rgba(199,191,199,1);
box-shadow: 0px 0px 40px 3px rgba(199,191,199,1);
max-width: 70%;
margin: 1% auto;
background-color: #F6F6F6;
}

Here the Layout Error

Acauã Pitta
  • 654
  • 1
  • 9
  • 16

4 Answers4

2

Try to apply

width: 100vw;

instead of

width: 100%;

100vw means, that the element's width must be 100% of window's width. I'm not sure that this solution is right in this case, but you have to try.

P.S.
  • 15,970
  • 14
  • 62
  • 86
  • Not really the same, check this answer for more information: http://stackoverflow.com/a/25225716/6053654 – P.S. May 25 '16 at 17:52
  • In your case you set `margin: 0` to your `body` and as you noticed, this **should** give the same result – P.S. May 25 '16 at 18:09
1

Just a guess, but you didn't close the html, body { tag

Paul Lemarchand
  • 2,068
  • 1
  • 15
  • 27
1

For me the problem was in the media queries:

the attribute "font-size"

letters and words was bigger than her container, decreasing adjusted by itself

Acauã Pitta
  • 654
  • 1
  • 9
  • 16
0

You are forgetting to close the html, body tag, so add a } at the end of that.

Also: because you are using chrome's dev tools, you may have to refresh the page after you switch devices. For example, for me the default is iphone 5, but when I switch to iphone 6, the layout gets screwed up, almost like zoomed in. So what I do is I just double click the "Toggle Device Mode" on the right to restart the device mode, where it starts up with iphone 6 as the default device, when it displays it correctly.

matmik
  • 590
  • 1
  • 4
  • 14
  • Yeah, i notice that, and i do this, but this isn't the solution. after 1048px the elements organize itself, logo to the center etc.. i guess it's something related to the width of device and not the value in itself – Acauã Pitta May 25 '16 at 15:46