A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Componentes y Header

9/20
Recursos

Aportes 6

Preguntas 3

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

CSS:

.show-mobile {
  display: block;
  box-shadow: 0px 2px 5px rgb(black, .2);
  > div {
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    button {
      border: 0;
      background: transparent;
    }
  }
}
.hide-mobile {
  display: none;
  box-shadow: 0px 2px 5px rgb(black, .2);
  > div {
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    margin-right: 1em;
  }
  nav {
    display: flex;
    align-items: center;
    ul {
      display: flex;
      list-style: none;
      a {
        margin: 0 .2em;
        color: inherit;
        text-decoration: none;
      }
    }
  }
  .info {
    display: flex;
    align-items: center;
    .account {
      margin-right: .5em;
    }
  }
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  .show-mobile {
    display: none;
  }
  .hide-mobile {
    display: block;
  }
}

/* Large and up */
@media screen and (min-width: 64em) {
  .show-mobile {
    display: none;
  }
  .hide-mobile {
    display: block;
  }
}

HTML:

<div class="show-mobile">
  <div>
    <button>
      <img src="./assets/svg/icon_menu.svg" alt="menu">
    </button>
    <a href="">
      <img src="./assets/svg/logo_yard_sale.svg" alt="logo">
    </a>
    <a href="">
      <img src="./assets/svg/icon_shopping_cart.svg" alt="logo">
    </a>
  </div>
</div>
<div class="hide-mobile">
  <div>
    <nav>
      <a class="logo" href="">
        <img src="./assets/svg/logo_yard_sale.svg" alt="logo">
      </a>
      <ul>
        <li><a href="">All</a></li>
        <li><a href="">Clothes</a></li>
        <li><a href="">Electronics</a></li>
      </ul>
    </nav>
    <div class="info">
      <div class="account">[email protected]</div>
      <div>
        <a href="">
          <img src="./assets/svg/icon_shopping_cart.svg" alt="logo">
        </a>
      </div>
    </div>
  </div>
</div>

Dejo el maquetado del nav

<div class="show-mobile">
  <div>
    <button>
      <img src="./assets/svg/icon_menu.svg" alt="menu">
    </button>
    <a href="">
      <img src="./assets/svg/logo_yard_sale.svg" alt="logo">
    </a>
    <a href="">
      <img src="./assets/svg/icon_shopping_cart.svg" alt="logo">
    </a>
  </div>
</div>
<div class="hide-mobile">
  <div>
    <nav>
      <a class="logo" href="">
        <img src="./assets/svg/logo_yard_sale.svg" alt="logo">
      </a>
      <ul>
        <li><a href="">All</a></li>
        <li><a href="">Clothes</a></li>
        <li><a href="">Electronics</a></li>
      </ul>
    </nav>
    <div class="info">
      <div class="account">[email protected]</div>
      <div>
        <a href="">
          <img src="./assets/svg/icon_shopping_cart.svg" alt="logo">
        </a>
      </div>
    </div>
  </div>
</div>

Dejo el css puro por si alguien no est√° utilizando scss como yo

.show-mobile{
    display: block;
    box-shadow: 0px 2px 5px rgb(black, .2);
}

.show-mobile > div{
    padding: 1em;
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.show-mobile > div img{
    border: 0;
    background: transparent;
}

.hide-mobile{
    display: none;
    box-shadow: 0px 2px 5px rgb(black, .2);
}

.hide-mobile > div{
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hide-mobile .logo{
    margin-right: 1em;
}

.hide-mobile nav{
    display: flex;
    align-items: center;
}

.hide-mobile nav ul{
    display: flex;
    list-style: none;
}

.hide-mobile nav ul a{
    margin: 0 .2em;
    color: inherit;
    text-decoration: none;
}

.hide-mobile .info{
    display: flex;
    align-items: center;
}

.hide-mobile .info .account{
    margin-right: .5em;
}  
  
  /* Medium only */
  @media screen and (min-width: 40em) and (max-width: 63.9375em) {
    .show-mobile {
      display: none;
    }
    .hide-mobile {
      display: block;
    }
  }
  
  /* Large and up */
  @media screen and (min-width: 64em) {
    .show-mobile {
      display: none;
    }
    .hide-mobile {
      display: block;
    }
  }

En el siguiente enlace pueden descargar las im√°genes SVG del proyecto.

Me estaban fallando algunos estilos para la parte de mobile, organic√© el archivo scss a√Īadiendo algunas caracteristicas. Dejo el aporte.

 .show-mobile {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    box-shadow: 0px 2px 5px rgb(black, .2);

    div {
      padding: 1em;
      display: flex;
      justify-content: space-between;
      align-items: center;

      button {
        border: 0;
        background: transparent;
      }
    }

    a{
        margin-top: 15px;
        margin-right: 15px;
    }

  }

CSS

.show-mobile {
display: block;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
.show-mobile > div {
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
}
.show-mobile > div button {
border: 0;
background: transparent;
}
.hide-mobile {
display: none;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
.hide-mobile > div {
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
}
.hide-mobile .logo {
margin-right: 1em;
}
.hide-mobile nav {
display: flex;
align-items: center;
}
.hide-mobile nav ul {
display: flex;
list-style: none;
}
.hide-mobile nav ul a {
margin: 0 0.2em;
color: inherit;
text-decoration: none;
}
.hide-mobile .info {
display: flex;
align-items: center;
}
.hide-mobile .info .account {
margin-right: 0.5em;
}
/* Medium only /
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
.show-mobile {
display: none;
}
.hide-mobile {
display: block;
}
}
/
Large and up */
@media screen and (min-width: 64em) {
.show-mobile {
display: none;
}
.hide-mobile {
display: block;
}
}