Estoy practicando desarrollo web con html, css y un poco de javascript. junk-apps.tk es la web. Pero como pueden ver si ingresan, si está en un tamaño entre 800 y 1400 px más o menos (de resto se ve bien) se reduce como en la siguiente imagen...
Ya probé añadiéndole width: 100%
y heigth:100%
al html
y al body
pero no sirve, y con las devtools simplemente no me dice qué es el objeto, solo me señala el html.
Gracias de antemano.
Código:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Nunito, 'Open Sans', sans-serif;
color: #fff;
display: flex;
flex-direction: column;
flex-wrap: wrap;
min-height: 100vh;
justify-content: space-between;
}
:root{
--primary: rgb(22, 184, 84);
--secondary: rgb(0, 98, 46);
--navbar: linear-gradient(0deg, var(--secondary) 0%, var(--primary) 100%);;
}
.nav{
z-index: 5;
background: var(--primary);
height: 60px;
position: fixed;
width: 100%;
box-shadow: 0px 2px 35px 5px rgba(0, 0, 0, 0.2);
}
.nav-container{
width: 90%;
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo{
height: 100px;
}
.nav-logo{
cursor: pointer;
}
.logo:hover{
transform: scale(1.1);
}
.nav-img{
width: 40px;
display: block;
}
#entrar{
display: unset;
}
#salir{
display: none;
}
.list{
background: var(--navbar);
width: 100%;
max-width: 670px;
position: fixed;
right: 0;
top: 60px;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
transform: translateX(120%) scale(0.01);
transform-origin: top;
transition: transform .5s ease-in-out;
}
.list--show{
z-index: -1;
transform: translate(0) scale(1);
}
.firma{
position: absolute;
bottom: 5px;
}
.firma>legend{
letter-spacing: .3em;
font-weight: 600;
font-size: small;
color: rgba(255,255,255, .3);
}
.firma>legend>a{
animation: create1 8s infinite alternate;
text-decoration: none;
font-weight: 800;
}
@keyframes create1 {
0%{
color: rgb(124, 23, 124);
}
20%{
color: rgb(27, 60, 167);
}
40%{
color: rgb(30, 158, 180);
}
60%{
color: rgb(33, 197, 101);
}
80%{
color: rgb(216, 204, 35);
}
100%{
color: rgb(216, 35, 207);
}
}
.dropbtn {
background-color: transparent;
color: #fff;
font-size: large;
border: none;
cursor: pointer;
transition: color .3s;
}
.dropbtn::after{
content: '';
position: absolute;
top: 8px;
right: -15px;
width: 9px;
height: 9px;
clip-path: polygon(48% 100%, 0 0, 100% 0);
background-color: rgb(243, 243, 243);
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: var(--primary);
min-width: 160px;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #fff;
padding: 12px 16px;
text-decoration: none;
display: block;
font-weight: 600;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: var(--secondary)}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
color: var(--secondary);
}
.item{
list-style-type: none;
padding: 5px 13px;
font-size: large;
}
.list-link:hover{
color: var(--secondary);
}
.list-link{
color: #fff;
text-decoration: none;
font-weight: 600;
transition: color .3s;
}
/* BODY */
.container{
position: relative;
top: 60px;
padding: 1em 1em 5em 1em;
color: black;
height: 100%;
}
/* FOOTER */
.footer{
width: 100%;
text-align: center;
padding: 1em;
align-self: flex-end;
min-height: 420px;
background-color: var(--primary);
border-radius: 5% 5% 0 0;
box-shadow: 0px -2px 45px 5px rgba(0, 0, 0, 0.2);
position: relative;
}
.footer-container{
display: flex;
height: 100%;
flex-flow: column wrap;
align-items: flex-end;
justify-content: space-around;
text-align: right;
}
.rrss{
align-self: flex-start;
text-align: left;
}
#phone{
position: absolute;
transform: scale(4);
left: 90px;
}
#ubi{
position: absolute;
transform: scale(4);
right: 90px;
}
#top{
position: absolute;
left: 40px;
transform: translateY(-40px) scale(1.8) rotate(315deg);
}
.rrss>ul>li, .acercate>ul>li{
list-style-type: none;
text-decoration: none;
}
.rrss>ul>li>a, .acercate>ul>li>a{
text-decoration: none;
font-weight: 600;
color: #fff;
transition: color .3s;
}
.rrss>ul>li>a:hover, .acercate>ul>li>a:hover{
color: var(--secondary);
}
.footer-container h5{
font-size: large;
border-bottom: .5px solid #fff;
color: var(--secondary);
}
.footer iframe, .footer ul{
margin-top: 10px;
}
.footer iframe:hover{
transform: scale(1.05);
}
.firma2{
margin-top: 10px;
width: 90%;
text-align: center;
}
.firma2>legend{
letter-spacing: .3em;
font-weight: 600;
font-size: small;
color: white;
}
.firma2>legend>a{
animation: create1 8s infinite alternate;
text-decoration: none;
font-weight: 800;
}
@media (min-width:700px){
.list{
z-index: 0;
position: unset;
flex-direction: row;
background: none;
transform: unset;
transition: none;
}
.nav-logo{
display: none;
}
.item:nth-child(5){
margin-left: 10px;
border: 3px solid var(--secondary);
border-radius: 10px;
transition: transform .5s;
}
.item:nth-child(5):hover{
transform: scale(1.1);
}
.firma{
display: none;
}
.footer{
min-height: auto;
}
.footer-container{
flex-flow: row wrap;
align-items: flex-start;
justify-content: space-around;
padding-top: 15px;
text-align: right;
font-size: larger;
}
.rrss{
align-self: flex-start;
text-align: right;
}
#phone{
position: absolute;
transform: scale(4);
z-index: 5;
left: 50em;
}
#ubi{
position: absolute;
transform: scale(4);
left: 20em;
}
#top{
left: 68em;
transform: translateY(-40px) scale(1.8) rotate(315deg);
}
}
Está organizado, lo principal primero, luego navbar, luego container, y luego foote, y al final el media query para pantallas más grandes que el celular.
Html:
<body>
<nav class="nav">
<div class="nav-container">
<figure>
<img class="logo" src="media/losgabrieles-01.ico" alt="Logo">
</figure>
<ul class="list">
<li class="item">
<a href="" class="list-link">Inicio</a>
</li>
<li class="item">
<div class="dropdown">
<button class="dropbtn">¿A dónde ir?</button>
<div class="dropdown-content">
<a href="">Desierto de la tatacoa</a>
<a href="">San Agustín</a>
<a href="">Pitalito</a>
<a href="">Paicol</a>
<a href="">San José de Isnos</a>
</div>
</div>
</li>
<li class="item">
<div class="dropdown">
<button class="dropbtn">Servicios</button>
<div class="dropdown-content">
<a href="#">Habitaciones</a>
<a href="#">Restaurante</a>
<a href="#">Spa</a>
</div>
</div>
</li>
<li class="item">
<a href="" class="list-link">Historia</a>
</li>
<li class="item">
<a href="" class="list-link">Contacto</a>
</li>
<div class="firma">
<legend>By <a href="https://www.nicolasarevalo.tk">Nico</a> :)</legend>
</div>
</ul>
<figure class="nav-logo">
<img src="media/menu.svg" id="entrar" alt="imagen menu">
<img src="media/close.svg" id="salir" alt="imagen salir">
</figure>
</div>
</nav>
<div class="container">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos ducimus commodi iusto, exercitationem
iure suscipit voluptatem ut pariatur. Reprehenderit eius eligendi unde inventore voluptatum maxime ab quasi
placeat voluptatibus ad!
Debitis natus, molestiae commodi, aspernatur nisi quaerat aliquid porro nihil, deleniti nostrum saepe
corporis corrupti rerum. Vero, sapiente doloremque atque in eius repellat voluptas quaerat non consectetur
nisi, debitis quo!
Exercitationem voluptates aperiam quas tempore, iusto repudiandae error nulla qui quam recusandae culpa esse
vero sequi nam. Quae deleniti ipsum quasi, fugit assumenda enim animi! Incidunt, sequi! Enim, culpa
...
</p>
</div>
<footer class="footer">
<div class="footer-container">
<div class="acercate">
<h5>Otros Destinos</h5>
<img src="media/ubi.svg" id="ubi" alt="">
<ul>
<li><a href="">Desierto de la tatacoa</a></li>
<li><a href="">San Agustín</a></li>
<li><a href="">Pitalito</a></li>
<li><a href="">Paicol</a></li>
<li><a href="">San José de Isnos</a></li>
</ul>
</div>
<div class="rrss">
<h5>Contáctenos</h5>
<img src="media/telefono.svg" id="phone" alt="">
<ul>
<li><a href="">+57 311 531 3178</a></li>
<li><a href="">+57 838 62 27</a></li>
<li><a href="">hotelcampestrelosgabrieles0@gmail.com</a></li>
<li><a href="">Calle 3 No. 1-03</a></li>
<li><a href="">Rivera, Huila, Colombia.</a></li>
</ul>
</div>
<div class="mapa">
<h5>Ubicación</h5>
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d63762.191198046!2d-75.252963!3d2.775812!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x330a746d987476d8!2sHotel%20Los%20Gabrieles!5e0!3m2!1ses-419!2sco!4v1631999761110!5m2!1ses-419!2sco"
width="200" height="150" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="firma2">
<legend>By <a href="https://www.nicolasarevalo.tk">Nico</a> :)</legend>
</div>
<div class="top">
<a href="#"><img src="media/top.svg" id="top" alt=""></a>
</div>
</div>
</footer>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
Esto es todo lo que tengo en mi js, aparte tengo jquery:
let switcher = true;
$(".nav-logo").click(function(){
let menu = document.querySelector('.list');
let entrar = document.querySelector('#entrar');
let salir = document.querySelector('#salir');
menu.classList.toggle('list--show');
if(switcher){
entrar.style.display="none";
salir.style.display="inherit";
switcher=false;
}else{
salir.style.display="none";
entrar.style.display="inherit";
switcher=true;
}
})
Y en la cabecera del html solo está:
Referencio estilo porque es lo que hará el cuerpo de la página. Pero no hay nada en ese archivo aún.