I have a problem, I am doing a test site in which a structure with a logo at the top and menu items at the bottom, etc, etc, is displayed.
These elements have the property of css width:100%;
and at first glance it seems that it prints it well on mobile but if you slide your finger to the left it turns out that there are blank spaces and the site seems to hide those elements.
Any solution please :/
This is how it prints before slipping
And this is what it looks like if you swipe to the left
The code is the following;
HTML
<!doctype html>
<html lang="es" >
<head>
<meta charset="utf-8">
<meta name="description" content="Bla bla bla">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pruebas</title>
<link href="styles.css" rel="stylesheet">
<!--[if IE]><link rel="shortcut icon" href="media/images/logo_ic.ico"><![endif]-->
<link rel="icon" type="image/png" href="media/images/logo_ic.png" />
<link rel="apple-touch-icon-precomposed" href="media/images/logo_ic.png">
</head>
<body>
<!------Header------>
<div class="mheader" >
<div class="row" >
<div class="logo" >
<img class="logo_img" src="media/images/logo.png" />
</div>
<div class="menu" >
<span class="menu_e" ><a href="#" >Link 1</a></span>
<span class="menu_e" ><a href="#" >Link 2</a></span>
<span class="menu_e" ><a href="#" >Link 3</a></span>
<span class="menu_e" ><a href="#" >Link 4</a></span>
</div>
</div>
</div>
<div class="cut" ></div>
<!------Contenido------>
<br /><br />
<div class="wrapper-big" >
<div class="wrapper-main" >Bla bla</div>
</div>
</body>
</html>
CSS
body {
font-family:Arial;
margin:0;
background-color:#EDEDED;
}
/*------Header------*/
.mheader {
width:100%;
height:auto;
display:table;
}
.row {
display:table-row;
}
.row div {
display:table-cell;
}
.row .logo {
width:25%;
padding:5px 0px 0px 5px;
}
.logo_img {
width:100%;
}
.row .menu {
width:75%;
font-size:14px;
text-align:right;
padding-right:40px;
}
.menu a {
text-decoration:none;
color:#2DAFCF;
font-weight:bold;
padding:7px;
}
.menu a:hover {
text-decoration:none;
font-weight:bold;
color:#2593A5;
background-color:#D6EBED;
padding:7px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
@media only screen and (max-width: 768px) {
.mheader {
width:100%;
height:auto;
display:table;
}
.row {
}
.row div {
display: block;
width: 100%;
}
.row .logo {
width:100%;
text-align:center;
padding-top:5px;
background-color:#2323CC;
}
.logo_img {
width:25%;
}
.row .menu {
width:100%;
font-size:14px;
text-align:center;
background-color:#FFCC35;
display:table;
}
.row .menu a {
width:100%;
text-decoration:none;
color:#2DAFCF;
font-weight:bold;
}
.row .menu a:hover {
width:100%;
text-decoration:none;
font-weight:bold;
color:#2593A5;
background-color:#D6EBED;
}
.menu_e {
display: block;
width:100%;
}
}
.cut {
clear:both;
}
/*------Wrapper------*/
.wrapper-big {
width:100%;
}
.wrapper-main {
width:95%;
margin-left: auto;
margin-right: auto;
}
What I need is that when it is displayed it adjusts and the elements are displayed as in the first image and that there are no spaces on one side that make the site look bad. THANKS AND GOOD DAY
I managed to fix it by doing the following:
As you can see, I defined two spaces, one for mobile and the other for desktop, apparently the CSS code is correct, although I don't understand why it only worked for me like this. If anyone could supplement the answer I would appreciate it.