0

Quiero que el title oxygen ocupe el 70% y la hamburguesa ocupe 30%. Estoy usando border-box y no debería haber ladrones de pixeles pero no se porque se ma baja cuando le doy los porcentajes que haga que los dos juntos sean 100% IMPORTANTE: debo hacerlo sin usar display flex; ni display: grid; el css solo se aplica a partir de los 600px o menos

@import url("https://fonts.google.com/specimen/Raleway?query=rale#styles");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-width: 320px;
}

/*BREAKPOINT MOBILE*/
@media only screen and (max-width: 450px) {
  header {
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.29);
    position: fixed;
    z-index: 1;
  }
  header nav {
    width: 100%;
  }
  header nav #oxygen_title {
    max-width: 70%;
    width: 100%;
    display: inline-block;
  }
  header nav #oxygen_title h1 {
    font-family: "Raleway", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 32px;
    color: #08a6e4;
  }
  header nav .caja_hamburguesa {
    display: inline-block;
    max-width: 30%;
    width: 100%;
  }
  header nav .caja_hamburguesa .hamburguesa {
    display: block;
    width: 20px;
    height: 2px;
    left: 0px;
    margin: 3px auto;
    top: 0px;
    background: #08a6e4;
  }
}

/*# sourceMappingURL=styles.css.map */
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OxygenShop</title>
    <link rel="stylesheet" href="./node_modules/normalize.css/normaslize.css">
    <link rel="stylesheet" href="./css/styles.css">
</head>

<body>
    <header>
        <nav>
                    <div id="oxygen_title">
                        <h1>OXYGENShop</h1>
                    </div>

                    <div class="caja_hamburguesa">
                        <div class="hamburguesa">
                            
                        </div>
                        <div class="hamburguesa">
                            
                        </div>
                        <div class="hamburguesa">
                            
                        </div>
                    </div>
        </nav>
    </header>
</body>

</html>

2
  • Debes borrar los max-width, y colocar los width 70% y 30% respectivamente
    – Yussef
    Commented el 27 sept. 2022 a las 10:27
  • si hago eso sigue pasando lo mismo, se baja la hamburguesa
    – FranyxD
    Commented el 27 sept. 2022 a las 10:35

1 respuesta 1

1

Como te decía en el comentario debes borrar los max-width, y colocar los width 70% y 30% respectivamente, pero además debes considerar el comportamiento del inline-block, que genera un espacio cuando existe un salto de línea entre los divs. Puedes leer esa publicación para más detalle.

Debes fijarte que los div de oxygen_title y caja_hamburguesa están pegados

@import url("https://fonts.google.com/specimen/Raleway?query=rale#styles");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-width: 320px;
}

  header {
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.29);
    position: fixed;
    z-index: 1;
  }
  header nav {
    width: 100%;
  }
  header nav #oxygen_title {
    width: 70%;
    display: inline-block;
  }
  header nav #oxygen_title h1 {
    font-family: "Raleway", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 32px;
    color: #08a6e4;
  }
  header nav .caja_hamburguesa {
    display: inline-block;
    width: 30%;
  }
  header nav .caja_hamburguesa .hamburguesa {
    display: block;
    width: 20px;
    height: 2px;
    left: 0px;
    margin: 3px auto;
    top: 0px;
    background: #08a6e4;
  }
    <link rel="stylesheet" href="./node_modules/normalize.css/normaslize.css">
    <link rel="stylesheet" href="./css/styles.css">

    <header>
        <nav>
                    <div id="oxygen_title">
                        <h1>OXYGENShop</h1>
                    </div><div class="caja_hamburguesa">
                        <div class="hamburguesa">
                            
                        </div>
                        <div class="hamburguesa">
                            
                        </div>
                        <div class="hamburguesa">
                            
                        </div>
                    </div>
        </nav>
    </header>

2
  • perfecto, efectivamente como diijste juntando las etiquetas funciono a la perfección, en el link que me dejaste vi que habia un usuario que usaba js para no tener que juntar los divs, pero no hay una forma de solucionarlo sin uso de js? ni hacer el apaño de no dejar espacios entre divs?
    – FranyxD
    Commented el 27 sept. 2022 a las 11:09
  • 1
    @FranyxD Puedes dejarlo como block y usar float:letft y float:right respectivamente. Pero ahí seguramente vas a tener que jugar con la alineación vertical de la hamburguesa.
    – Yussef
    Commented el 27 sept. 2022 a las 11:17

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.