Estoy tratando de pasar una web php de un hosting a un vps, tengo pocos conocimientos de PHP, pero gracias a ésta página pude hacer que funcione, conecté a la base de datos y actualicé algunas extensiones que estaban obsoletas y no funcionaban en php7, al fin pude dejar la web operativa, pero en cuanto al diseño no puedo hacer que sea responsive, ya que tiene un menú y muestra el contenido php en un iframe que no se ve bien en los móviles, se suma a ésto que no encuentro a la persona que me hizo la programación y por eso busco su ayuda, viendo algunos videos utilicé css grid para tratar de hacerlo responsive, lo logré en parte ya que el iframe no cambia, solo cambia el menú y sigue sin verse bien en móviles. Su ayuda me servirá de mucho.
Código html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="estilos.css">
<title>TC</title>
</head>
<body>
<div id="preloader">
<div id="loader"> </div>
<!-- Menu en Header -->
<div class="contenedor">
<header class="header">
<div class="logo" >
<a href="menu_principal.html">
<img alt="TC" src="imagenes/logo.png"></a>
</div>
<nav>
<ul class="menu">
<li><a href="principal.php" target="formularios">Inicio</a></li>
<li><a href="#">Referidos</a>
<ul class="submenu">
<li><a href="rr.php" target="formularios">Registro De Referidos</a></li>
<li><a href="list_refe1.php" target="formularios">Listado Referidos</a></li>
</ul>
</li>
<li><a href="#">Junta</a>
<ul class="submenu">
<li><a href="principal1.php" target="formularios">Junta 100</a></li>
<li><a href="principal2.php" target="formularios">Junta 250</a></li>
<li><a href="principal3.php" target="formularios">Junta 500</a></li>
</ul>
</li>
<li><a href="#">Usuario</a>
<ul class="submenu">
<li><a href="verif_contrausu.php" target="formularios">Cambiar Contraseña</a></li>
<li><a href="cerrarsesion.php" target="formularios">Cerrar Sesión</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<main class="contenido">
<div id="contenido">
<iframe src="p.php" style="width: 100%; height: 250px" frameborder=0 name="formularios"></iframe>
</div>
</main>
<footer class="footer">
<li><a href="Regla.html">Términos y Condiciones</a></li>
<li><a href="preg_resp.html" target="formularios">Preguntas Frecuentes</a></li>
</footer>
</body>
</html>
Código css:
* {
margin: 0;
padding: 0;
text-decoration: none;
}
body {
background: #ffffff;
color: #000;
font-family: 'Roboto', sans-serif;
}
.contenedor {
width: 100%;
max-width: auto;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, auto);
grid-template-areas: "header header header"
"contenido contenido contenido"
"footer footer footer";
}
.contenedor > div,
.contenedor .header,
.contenedor .contenido,
.contenedor .footer {
background: #fff;
padding: 20px;
border-radius: 4px;
}
.contenedor .header {
background: #12c6cc;
grid-area: header;
}
.contenedor .contenido {
grid-area: contenido;
width: 100%;
max-width: 1000px;
margin: 10px auto;
}
.contenedor .footer {
background: #2259f1;
color: #fff;
grid-area: footer;
}
.menu {
text-align: center;
width: 70%;
height: 70px;
float: left;
}
.menu > li{
position: relative;
display: inline-block;
}
.menu > li > a{
display: block;
padding: 15px 20px;
list-style: none;
color: #fff;
}
.menu li a:hover{
color: #1f50f1;
transition: all .3s;
}
.submenu {
position: absolute;
list-style: none;
background: #12c6cc;
width: 120%;
visibility: hidden;
opacity: 0;
transition: opacity .5s;
}
.submenu li a{
display: block;
padding: 15px;
color: #fff
}
.menu li:hover .submenu{
visibility: visible;
opacity: 1;
}
.logo {
width: 30%;
height: 70px;
float: left;
box-sizing: border-box;
}
.menu-icon {
display: none;
}
@media screen and (max-width: 767px){
.menu > li{
display: block;
}
.contenedor .header {
grid-template-areas: "header header header"
"contenido contenido contenido"
"footer footer footer";
}
}