0

Buenas una vez más a tod@s,

Estoy intentando elaborar una web responsive, pero no tengo ni idea de cómo implementar correctamente las propiedades CSS para que esto ocurra. Como se ve en el código, he intentado hacer flexboxes, pero no tengo claro que sea la mejor opción, ya que al redimensionar, las cajas de contenido también lo hacen, mientras que el texto no. Lo mismo ocurre con el logo, que al redimensionarse, va cambiando su tamaño, mientras que el h1 no lo hace.

En definitiva, que estoy bastante perdido con este asunto y me gustaría que alguien pudiera darme una orientación de dónde podría estar el fallo y qué podría hacer para que, de forma manual, el contenido fuera responsive.

Muchas gracias por adelantado.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>e-Administración -- Trámites</title>

    <style>
        #header_cont_flex{
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content:left
            align-items: flex-start;
        }

        .header_elem_flex{
            margin-right: 18%;
        }
        
        img{
            width: 23%;
            height: 20%;
        }

        h1{
            width: max-content;
            height: 20%;
            color: #00A8F3;
            font-size: 300%;
            text-align: center;
        }

        #nav_cont_flex{
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: center;
            align-items: flex-start;
        }

        .nav_elem_flex{
            color: white;
            background-color: #00A8F3;
            align-self: center;
            width: 30%;
            height: 20%;
            text-align: center;
            text-decoration: none;
            font-size: 150%;
            margin-bottom: 1%;
            margin-top: 1%;
            border-radius: 15px;
            padding: 2%;
        }

    </style>
</head>
<body>
    <header id="header_cont_flex">
        <img src="logo.png" alt="Logo Portal Administración Electrónica" class="header_elem_flex"> 
        <h1 class="header_elem_flex">e-Administración <br> Trámites</h1>
    </header>
    <hr/>
    <nav id="nav_cont_flex">
        <a href="https://portal.seg-social.gob.es/wps/portal/importass/importass/Categorias/Vida+laboral+e+informes/Informes+sobre+tu+situacion+laboral/Informe+de+tu+vida+laboral?_ga=2.167443387.447125789.1645431193-672400200.1635324747" target="_blank" class="nav_elem_flex">Informe de vida laboral</a>

        <a href="https://sede.mjusticia.gob.es/es/tramites/certificado-registro-central" target="_blank" class="nav_elem_flex">Certificado de delitos sexuales</a>

        <a href="https://sede.seg-social.gob.es/wps/portal/sede/sede/Ciudadanos/Pensiones/181119_INSS_BIS" target="_blank" class="nav_elem_flex">Certificado de no pensionista</a>

        <a href="https://sede.seg-social.gob.es/wps/portal/sede/sede/Ciudadanos/CiudadanoDetalle/!ut/p/z1/rVRdk5owFP0r-8Ij5iaAhr6h3WG1utZ1WYUXJyZB0_K1kMXaX19gO91-qZ2xvAQuh3Nyz8kFRWiNoozVase0yjOWNM9h1N9YuG9jF_DUh_EteMHsQ-BaC8sfY7TqAHDi8gBF579_QhGKeKYLvUdhJYXc8DzTMlMirwxoCwZw9SKYYFlbUVmcl6msbo43XJZaxYqzDoopxtjdqKyqWsqCK4FCRxDuyq0wB7HDTRsLMBkDyxQOUCmAECfm31s4sUdwL7awavUuMHSAcy6dFSF9NEHRLsm3r5F42daiOxSVMpalLHsvZVPea128M8CAw-HQK_JSs6RXdY7pkmVSV9XHrmhA8WNV2oBR57cUedlgDRhniqu8tb6s27tqw2XLkMjqb9L7vNJo_YskWjbQsDF18NYQgN_0GQxh-QQEg2-hVa3kAQVZk2bT1PItM1diETv21nSY5Zg2obZJJScm4RKIiKnjOAzdwe8KPl44rcKcjh8WGOjgSoVXemdOAU-ATKE_o-C5i2UwvccWDOwr6SeXAm-8JuVsNGu8Lpjem-3BR-sTxx-tAZ98hUL16fk58po5a6P-0uR1zaCdVvojkaENHp4_9sndLYb5Gcv-aU7PJuIDvpJ-cmnO_7eRP_-xijRIqXU0Pz_Qo5XU-126eT-8N8NJ_XV6l9TpaEsPj3G6-gal3zA1/dz/d5/L2dBISEvZ0FBIS9nQSEh/" target="_blank" class="nav_elem_flex">Certificado de prestaciones</a>

        <a href="https://ws054.juntadeandalucia.es/autenticacion/login?service=https%3A%2F%2Fws054.juntadeandalucia.es%2Fapdweb%2Fweb%2Fguest%2Fhome" target="_blank" class="nav_elem_flex">Renovar demanda de empleo</a>

        <a href="https://sede.agenciatributaria.gob.es/Sede/Renta.html" target="_blank" class="nav_elem_flex">Obtener declaración de la renta</a>
    </nav>
    <hr/>
    <footer>
        <p>Nombre de la empresa</p>
        <p>Teléfono de contacto</p>
        <p>e-mail</p>
    </footer>
</body>
</html>

5
  • Como comentario que no viene a cuento, yo me olvidaria de hacerlo a mano y usaria bootstrap, que aunque tiene una curva de aprendizaje un poco costosa, al princio, luego lo vas a bordar y dejarás que sea el quien lo haga todo sin tocar apenas nada de css directamente.
    – masterguru
    el 21 feb. 2022 a las 10:31
  • Tomo nota @masterguru . Sin embargo, en esta ocasión la idea es que lo haga a mano precisamente para aprender. Pero, en cualquier caso, gracias por la recomendación :D
    – dancareli
    el 21 feb. 2022 a las 10:35
  • Entiendo, pues adelante, pero piensa que esta pregunta te la van a cerrar porque estará basada en opiniones y no en un error específico. Mira de plantearla de otro modo que no sea pidiendo consejos, sino soluciones concretas a tu problema.
    – masterguru
    el 21 feb. 2022 a las 10:38
  • Pues gracias por la ayuda. Voy a modificarla para que no la cierren. Gracias una vez más.
    – dancareli
    el 21 feb. 2022 a las 10:45
  • Modifica también el título de la pregunta: recuerda que tanto la pregunta como la respuesta deben ser útiles no solo para ti, sino también para los demás miembros de la comunidad. "Qué está fallando" no es un título descriptivo.
    – padaleiana
    el 21 feb. 2022 a las 11:40

1 respuesta 1

0

Buen día,

Para cambiar el tamaño del texto, en font-size : puedes utilizar la unidad vw (Viewport width) y eso hará que el tamaño de letra cambie al cambiar el tamaño de la página

Para continuar con tu aprendizaje te recomiendo la página w3schools (Aquí esta el ejemplo del tamaño de texto pero hay muchos ejemplos más)

Aquí te dejo un ejemplo con el font-size aplicado únicamente a tu h1

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>e-Administración -- Trámites</title>

    <style>
        #header_cont_flex{
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content:left
            align-items: flex-start;
        }

        .header_elem_flex{
            margin-right: 18%;
        }
        
        img{
            width: 23%;
            height: 20%;
        }

        h1{
            width: max-content;
            height: 20%;
            color: #00A8F3;
            font-size: 8vw;
            text-align: center;
        }

        #nav_cont_flex{
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: center;
            align-items: flex-start;
        }

        .nav_elem_flex{
            color: white;
            background-color: #00A8F3;
            align-self: center;
            width: 30%;
            height: 20%;
            text-align: center;
            text-decoration: none;
            font-size: 150%;
            margin-bottom: 1%;
            margin-top: 1%;
            border-radius: 15px;
            padding: 2%;
        }

    </style>
</head>
<body>
    <header id="header_cont_flex">
        <img src="logo.png" alt="Logo Portal Administración Electrónica" class="header_elem_flex"> 
        <h1 class="header_elem_flex">e-Administración <br> Trámites</h1>
    </header>
    <hr/>
    <nav id="nav_cont_flex">
        <a href="https://portal.seg-social.gob.es/wps/portal/importass/importass/Categorias/Vida+laboral+e+informes/Informes+sobre+tu+situacion+laboral/Informe+de+tu+vida+laboral?_ga=2.167443387.447125789.1645431193-672400200.1635324747" target="_blank" class="nav_elem_flex">Informe de vida laboral</a>

        <a href="https://sede.mjusticia.gob.es/es/tramites/certificado-registro-central" target="_blank" class="nav_elem_flex">Certificado de delitos sexuales</a>

        <a href="https://sede.seg-social.gob.es/wps/portal/sede/sede/Ciudadanos/Pensiones/181119_INSS_BIS" target="_blank" class="nav_elem_flex">Certificado de no pensionista</a>

        <a href="https://sede.seg-social.gob.es/wps/portal/sede/sede/Ciudadanos/CiudadanoDetalle/!ut/p/z1/rVRdk5owFP0r-8Ij5iaAhr6h3WG1utZ1WYUXJyZB0_K1kMXaX19gO91-qZ2xvAQuh3Nyz8kFRWiNoozVase0yjOWNM9h1N9YuG9jF_DUh_EteMHsQ-BaC8sfY7TqAHDi8gBF579_QhGKeKYLvUdhJYXc8DzTMlMirwxoCwZw9SKYYFlbUVmcl6msbo43XJZaxYqzDoopxtjdqKyqWsqCK4FCRxDuyq0wB7HDTRsLMBkDyxQOUCmAECfm31s4sUdwL7awavUuMHSAcy6dFSF9NEHRLsm3r5F42daiOxSVMpalLHsvZVPea128M8CAw-HQK_JSs6RXdY7pkmVSV9XHrmhA8WNV2oBR57cUedlgDRhniqu8tb6s27tqw2XLkMjqb9L7vNJo_YskWjbQsDF18NYQgN_0GQxh-QQEg2-hVa3kAQVZk2bT1PItM1diETv21nSY5Zg2obZJJScm4RKIiKnjOAzdwe8KPl44rcKcjh8WGOjgSoVXemdOAU-ATKE_o-C5i2UwvccWDOwr6SeXAm-8JuVsNGu8Lpjem-3BR-sTxx-tAZ98hUL16fk58po5a6P-0uR1zaCdVvojkaENHp4_9sndLYb5Gcv-aU7PJuIDvpJ-cmnO_7eRP_-xijRIqXU0Pz_Qo5XU-126eT-8N8NJ_XV6l9TpaEsPj3G6-gal3zA1/dz/d5/L2dBISEvZ0FBIS9nQSEh/" target="_blank" class="nav_elem_flex">Certificado de prestaciones</a>

        <a href="https://ws054.juntadeandalucia.es/autenticacion/login?service=https%3A%2F%2Fws054.juntadeandalucia.es%2Fapdweb%2Fweb%2Fguest%2Fhome" target="_blank" class="nav_elem_flex">Renovar demanda de empleo</a>

        <a href="https://sede.agenciatributaria.gob.es/Sede/Renta.html" target="_blank" class="nav_elem_flex">Obtener declaración de la renta</a>
    </nav>
    <hr/>
    <footer>
        <p>Nombre de la empresa</p>
        <p>Teléfono de contacto</p>
        <p>e-mail</p>
    </footer>
</body>
</html>

1
  • ¡Pues es bastante útil! Muchas gracias por la recomendación :)
    – dancareli
    el 21 feb. 2022 a las 10:52

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.