I have a problem displaying my website on large retina displays. On desktop and mobile it goes well, but on MacBook retina screen it looks huge and doesn't fit into browser. Is there a way to make the .container look the same width and height and float top left on all devices and all screens ()?
<body> <div class="container"> <nav> </nav> </div> </body>
here is the website: www.pctutorials.16mb.com
Here is the code:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
line-height: 0;
}
html {
height: 100%;
}
body {
width: 100%;
height: 100%;
position: relative;
float: left;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:none;
}
p {
font-family: Arial, sans-serif;
font-size: 13px;
line-height: normal;
color: white;
}
.container {
width: 2000px;
height: 1080px;
position: relative;
float: left;
overflow: hidden;
background: url("images/background.jpg") no-repeat top left;
background-size: 2000px 1080px;
}
First of all, you set
.containerfixed values ofwidthandheight. Same goes fornavelement.This is why your webpage doesn't fit on a MacBook (and pretty much all the other laptops, retina or not, too).
To fix this, I'd start with:
and
Then, you'd need to play with is
.nav-menuwhich might be cut off on smaller screens. Sadly, there's no way you can fix this without playing with media queries a little bit.