0

Es una pagina de prueba que hice (una tienda) ya que estoy practicando html y css porque soy nuevo en esto de la programacion, cuando es en pantalla grande de 1020px o mas se ve bien pero en diseño de movil los contenedores de los productos se me ponen con un height al 60% por defecto y hacen que el contenedor que tiene los productose se vea excesivamente alargado, ya hice los cambios en el css y en local se ve bien pero cuando la web esta subida se sigue viendo con ese problema. alguna solucion? por mas que le cambie el height al archivo css se sigue visualizando con el height del 60%

introducir la descripción de la imagen aquí

http://free.zz.com.ve/

<html>
<head>
    <title>Tecnoven</title>
    <link  rel="icon"   href="favicon.png" type="image/png" />
    <link rel="stylesheet" href="styles_grande.css" media="screen and (min-width:1000px)">
    <link rel="stylesheet" href="styles_mini.css" media="screen and (max-width:999px)">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

        <header class="header-grande header-mini">
        
            <nav>
                <img class="logo-grande logo-mini" src="logo.png">

                <ul class="lista-nav-grande lista-nav-mini">
                    <li> <a href= #inicio > Inicio </a> </li>
                    <li> <a href= #productos > Productos </a> </li>
                    <li> <a href= #contacto > Contacto </a> </li>
                </ul>
            </nav>

            <p class="siguenos-grande grande">Siguenos en nuestras redes!</p>

            <a class="logofb-grande grande" title="Perfil de Tecnoven en Facebook" href="http://www.facebook.com/DAGF1712">
                <img class="logofb-grande grande" src="logofb.png" alt="Perfil de Tecnoven en Facebook"> </a>

            <a class="logoig-grande grande" title="Perfil de Tecnoven en Instagram" href="http://www.instagram.com/DAGF1712">
                <img class="logoig-grande grande" src="logoig.png" alt="Perfil de Tecnoven en Instagram"> </a>

        </header>

        <main class="main-grande main-mini">

            <h2 class="productos-nuevos-grande productos-nuevos-mini">PRODUCTOS NUEVOS</h2>
            <h3 class="smartphones-grande smartphones-mini">Telefonos inteligentes</h3>

                        <div class="smartphone-grande smartphone-mini">
                <h3 class="titulo-smartphone-grande titulo-smartphone-mini">Xiaomi Redmi Note 8 Pro</h3>

                <a class="foto-smartphone-grande foto-smartphone-mini" title="Foto del Redmi Note 8 Pro" href="#">
                <img class="foto-smartphone-grande foto-smartphone-mini" src="smartphone1.jpg" alt="Foto del Redmi Note 8 Pro"> </a>

                <table class="tabla-smartphone-grande grande">
                    <thead>
                    <tr>
                        <th>ESPECIFICACIONES</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Almacenamiento</td>
                            <td>32GB/64GB/128GB</td>
                        </tr>
                        <tr>
                            <td>Memoria RAM</td>
                            <td>6GB</td>
                        </tr>
                        <tr>
                            <td>Camara frontal</td>
                            <td>8 Megapixeles</td>
                        </tr>
                        <tr>
                            <td>Camara trasera</td>
                            <td>4 camaras: 32mp,8mp,5mp,2mp</td>
                        </tr>
                    </tbody>
                </table>

                <table class="precio-smartphone-grande precio-smartphone-mini">
                    <thead>
                        <tr>
                            <th>Precio</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>230$</td>
                        </tr>
                    </tbody>
                </table>

                <a class="comprar-smartphone-grande comprar-smartphone-mini" href="#">Comprar</a>
                
            </div>
            
            <div class="smartphone-grande smartphone-mini">
                <h3 class="titulo-smartphone-grande titulo-smartphone-mini">Samsung Galaxy Note 10</h3>

                <a class="foto-smartphone-grande foto-smartphone-mini" title="Foto del Redmi Note 8 Pro" href="#">
                <img class="foto-smartphone-grande foto-smartphone-mini" src="smar2.jpg" alt="Foto del Redmi Note 8 Pro"> </a>

                <table class="tabla-smartphone-grande grande">
                    <thead>
                    <tr>
                        <th>ESPECIFICACIONES</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Almacenamiento</td>
                            <td>32GB/64GB/128GB</td>
                        </tr>
                        <tr>
                            <td>Memoria RAM</td>
                            <td>6GB</td>
                        </tr>
                        <tr>
                            <td>Camara frontal</td>
                            <td>8 Megapixeles</td>
                        </tr>
                        <tr>
                            <td>Camara trasera</td>
                            <td>4 camaras: 32mp,8mp,5mp,2mp</td>
                        </tr>
                    </tbody>
                </table>

                <table class="precio-smartphone-grande precio-smartphone-mini">
                    <thead>
                        <tr>
                            <th>Precio</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>900$</td>
                        </tr>
                    </tbody>
                </table>

                <a class="comprar-smartphone-grande comprar-smartphone-mini" href="#">Comprar</a>
                
            </div>
 <div class="smartphone-grande smartphone-mini">
                <h3 class="titulo-smartphone-grande titulo-smartphone-mini">Samsung Galaxy A50</h3>

                <a class="foto-smartphone-grande foto-smartphone-mini" title="Foto del Redmi Note 8 Pro" href="#">
                <img class="foto-smartphone-grande foto-smartphone-mini" src="smart.jpg" alt="Foto del Redmi Note 8 Pro"> </a>

                <table class="tabla-smartphone-grande grande">
                    <thead>
                    <tr>
                        <th>ESPECIFICACIONES</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Almacenamiento</td>
                            <td>32GB/64GB/128GB</td>
                        </tr>
                        <tr>
                            <td>Memoria RAM</td>
                            <td>6GB</td>
                        </tr>
                        <tr>
                            <td>Camara frontal</td>
                            <td>8 Megapixeles</td>
                        </tr>
                        <tr>
                            <td>Camara trasera</td>
                            <td>4 camaras: 32mp,8mp,5mp,2mp</td>
                        </tr>
                    </tbody>
                </table>

                <table class="precio-smartphone-grande precio-smartphone-mini">
                    <thead>
                        <tr>
                            <th>Precio</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>250$</td>
                        </tr>
                    </tbody>
                </table>

                <a class="comprar-smartphone-grande comprar-smartphone-mini" href="#">Comprar</a>
                
            </div>

        </main>

        <footer class="footer-grande footer-mini">
            
            <p class="p-grande p-mini">Todos los derechos reservados ©.</p>

                <p class="siguenos-mini mini">Siguenos en nuestras redes!</p>

            <a class="logofb-mini mini" title="Perfil de Tecnoven en Facebook" href="http://www.facebook.com/DAGF1712">
                <img class="logofb-mini mini" src="logofb.png" alt="Perfil de Tecnoven en Facebook"> </a>

            <a class="logoig-mini mini" title="Perfil de Tecnoven en Instagram" href="http://www.instagram.com/DAGF1712">
                <img class="logoig-mini mini" src="logoig.png" alt="Perfil de Tecnoven en Instagram"> </a>

        </footer>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
    font: small-caps 100% serif;
}

.grande{ 
    display: none;
 }

 header-mini{
    width: 100%;
    border-bottom: 4vw solid #04c4a4;
    height: %;

 }

 .logo-mini{
    width: 100%;
    height: 30%;
 }

 .lista-nav-mini{
    list-style: none;
    overflow: hidden;
 }

 .lista-nav-mini li{
    position: relative;
    left: 25%;
    display: inline;
    float: left;
    width: 15%;
    margin:2%;
}

.lista-nav-mini a{
    width: 80%;
    font-size: 2.5vw;
    text-align: center;
    display: block;
    padding: 10%;
    border:1px solid #04c4a4;
    text-decoration: none;
    color: black;
 }

 .lista-nav-mini a:hover{
    box-shadow: 6px 6px 8px #999;
    background-color: #04c4a430;
 }

 .main-mini{
    width: 85%;
    margin-top: 2%;
    margin-left: 3%;
}

.productos-nuevos-mini{
    font-weight: bold;
    font-size: 3vw;
}

.smartphones-mini{
    font-size: 2.5vw;
    margin-top: 1%;
}

.smartphone-mini {
    border: 3px solid #04c4a4;
    border-radius: 25px;
    margin: auto;
    margin-top: 5%;
    position: relative;
    left: 5%;
    width: 80%;
    height: 25%;
}

.titulo-smartphone-mini{
    font-weight: bold;
    font-size: 3vw;
    text-align: center;
    width: 100%;
    position: relative;
    top: 5%;
}

.foto-smartphone-mini{
    width: 40%;
    margin-top: 9%;
    position: relative;
    left: 15%;
}

.precio-smartphone-mini{
    font-size: 3vw;
    float: right;
    position: relative;
    right: 65%;
    margin-top: 55%;
    text-align: center;
}

.comprar-smartphone-mini{
    font-size: 3vw;
    float: right;
    position: relative;
    right: 27%;
    margin-top: 58%;
    padding: 1.5%;
    border: 1px solid black;
    border-radius: 25%;
    text-decoration: none;
    color: black;
}

.comprar-smartphone-mini:hover {
    box-shadow: 6px 6px 8px #999;
    background-color: #04c4a430;
}

.footer-mini{
    background-color: black;
    height: 25%;
    margin-top: 7%;
    color: white;
    text-align: center;
}

.p-mini{
    font-size: 3vw;
    position: relative;
    top: 80%;
    right: 20%;
}

.siguenos-mini{
    font-size: 4vw;
}

.logofb-mini{
    width: 11%;
    position: relative;
}

.logoig-mini{
    width: 8.1%;
    position: relative;
    left: 1%;
    margin-bottom: 1.5%;
}
9
  • 2
    Por favor coloca tu código, es imposible dar un porque sin ver el código. Saludos. el 10 jul. 2020 a las 12:47
  • Acabo de ver el link que muestras la verdad no puedo ver el problema que comentas, seria mucho mejor si mostraras una captura para ver mejor el problema y obviamente adjuntes el código necesario para verificar donde se encuentra el error.
    – Israel-ICM
    el 10 jul. 2020 a las 13:57
  • subido el codigo el 10 jul. 2020 a las 14:01
  • ya tambien agrege captura para que vean a que me refiero el 10 jul. 2020 a las 14:03
  • 1
    Al entrar en modo de diseño adaptable te añade #fix { width: 25%;} solo para las vistas móvil. En el código que pones no se ve el origen de este problema. Quizás sea parte de algún framework CSS que uses o en los scripts. Puede que esté en styles_mini.css
    – Sergio
    el 10 jul. 2020 a las 14:34

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.