0

**Buenas, tengo un inconveniente donde se me redimensiona el topnav y no entiendo porqué si en ambos lados está exactamente igual.

Home:

introducir la descripción de la imagen aquí

Sobre mi:

introducir la descripción de la imagen aquí

Por algún motivo se me achica el topnav en Sobre mi

Este es el css que tengo hecho:

body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .topnav {
      width: 100%;
      background-color: #000;
      overflow: hidden;
    }
    
    .topnav a {
      color: #fff;
      padding: 12px;
      color: white;
      text-decoration: none;
      font-size: 17px;
      margin: 5px 2px;
    }
    
    .topnav a:hover {
      background-color: #fff;
      color: black;
    }
    
    /* Para el elemento sobre mi */
    .items {
      width: 69px;
      text-align: center;
      margin: 5px 2px;
    }
    
    @media screen and (max-width: 500px) {
      .navbar a {
        float: none;
        display: block;
      }
    }
<html>
  <head>
    <meta charset="utf-8">
    <title>FraBa Soft Home</title>
    <link rel="stylesheet" type="text/css" href="css/navigation-header.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <nav class="topnav">
      <div class="pull-right">
        <a href="https://www.facebook.com" class="fa fa-fw fa-facebook"></a>
        <a href="https://www.facebook.com" class="fa fa-fw fa-instagram"></a>
        <a href="https://www.facebook.com" class="fa fa-fw fa-twitter"></a>
      </div>
      <div class="pull-left">
        <a href="#" class="fa fa-fw fa-home"></a>
        <a href="sobre_mi.html" class="fa items">Sobre mi</a>
      </div>
    </nav>
  </body>
</html>

body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .topnav {
      width: 100%;
      background-color: #000;
      overflow: hidden;
    }
    
    .topnav a {
      color: #fff;
      padding: 12px;
      color: white;
      text-decoration: none;
      font-size: 17px;
      margin: 5px 2px;
    }
    
    .topnav a:hover {
      background-color: #fff;
      color: black;
    }
    
    /* Para el elemento sobre mi */
    .items {
      width: 69px;
      text-align: center;
      margin: 5px 2px;
    }
    
    @media screen and (max-width: 500px) {
      .navbar a {
        float: none;
        display: block;
      }
    }
<html>
  <head>
    <meta charset="utf-8">
    <title>FraBa Soft Sobre mi</title>
    <link rel="stylesheet" type="text/css" href="css/navigation-header.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <nav class="topnav">
      <div class="pull-right">
        <a href="https://www.facebook.com" class="fa fa-fw fa-facebook"></a>
        <a href="https://www.facebook.com" class="fa fa-fw fa-instagram"></a>
        <a href="https://www.facebook.com" class="fa fa-fw fa-twitter"></a>
      </div>
      <div class="pull-left">
        <a href="index.html" class="fa fa-fw fa-home"></a>
        <a href="#" class="fa items">Sobre mi</a>
      </div>
    </nav>
  </body>
</html>

¿Alguien me explica que estoy haciendo mal? Probablemente en el código no se vea bien, pero si abren las imágenes se puede observar bien lo que digo.

1 respuesta 1

1

Presiona Crtl+0(0 de tu teclado numérico) para reestablecer el zoom de tu Chrome en la pestaña "index". el error no es de código, simplemente aumentaste el zoom del navegador en dicha pestaña, el tamaño real de tu código está en "Sobre mi"

1
  • Era exactamente eso, muchísimas gracias Commented el 23 oct. 2020 a las 0:55

Tu Respuesta

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

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