Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Menú mobile

14/22
Recursos

Aportes 329

Preguntas 18

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Hola, para resolver el problema de especificidad y no colocar el !important solamente tuve que colocarle mas peso a lo que quería modificar. En este caso, en lugar de colocarle solamente la clase:

.sign-out

Se la cololque con uno de sus padres, para este ejemplo fue mobile-menu, quedando asi:

.mobile-menu .sign-out

Seria que se le apliquen estilos a aquellos elementios con la clase sign-out que esten dentro de otro elemento con la clase .mobile-menu Entonces aquí en peso se vuelve de dos clases, sobreescribiendo el anterior 😄.

Hola a todos! Aquí mi solución al reto:

.mobile-menu ul:nth-child(3) {
    position: absolute;
    bottom: 0;
}

Resultado:

Buenas así lo resolví. Converti el contenedor a display:flex y puse la propiedad justify content: space-between.
Al tercer ul le aumente el margin-bottom para que no quedara tana abajo

        .mobile-menu{
            padding:24px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100vh;
            
        }

        .mobile-menu ul:nth-child(3){
            margin-bottom: 50px;
        }

Estoy muy feliz dde estos cursos prácticos, al inicio del curso no podía maquetar ni haces los estilos de una clase yo solo (sin ver la solución de la maestra), poco a poco fuí aprendiendo la manera en que resuelve los problemas la maestra y ya puedo hacer los estilos de una clase sin antes ver su solución 😁 tmb esta fue mi primer clase en la que yo hice el maquetado en html, es algo sencillo pero algo es algo jaja 👍 de ahí la importancia de estos cursos prácticos, es oro puro saber cómo profesionales resuelven problemas similares a los que nosotros nos toparémos en un futuro 🥳

Buenas, aqui mi solucion:


.mobile-menu ul:nth-child(3) {
margin-top: 100px;
}

Asi quedo:

👉 Se debe pensar una solución al reto desde que empezamos a maquetar html, para evitar el uso de position absolute, que se considera una mala práctica 😨, podemos separar la estructura del menú en 2, la parte superior y la parte inferior para que simplemente tengamos que hacer display: flex; flex-direction: column; al padre que envuelve estas dos partes y separarlas con un justify-content: space-between como lo hizo la maestra en clases pasadas 👌

Esta es mi solucion

.menu-mobile{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    padding: 24px;
}

Primero, muy importante debemos tener claro como se comportará el tamaño de nuestra pantalla definiendo el tipo de tamaño de caja

    * {
      box-sizing: border-box;
    }

Seguido agregué un div más para separar la última lista de las dos primeras por medio de un flexbox:

  <div class="mobile-menu">
    <div> <!-- Este es el nuevo "div" -->
      <ul>
        <li><a href="/">CATEGORIES</a></li>
        <li><a href="/">All</a></li>
        <li><a href="/">Cloth</a></li>
        <li><a href="/">Electronics</a></li>
        <li><a href="/">Furniture</a></li>
        <li><a href="/">Toys</a></li>
        <li><a href="/">Others</a></li>
      </ul>
      <ul>
        <li><a href="/">My orders</a></li>
        <li><a href="/">My Account</a></li>
      </ul>
    </div> <!-- Cierre del nuevo div -->
    <ul>
      <li><a href="/" class="email">[email protected]</a></li>
      <li><a href="/" class="sign-out">Sign out</a></li>
    </ul>
  </div>

Ahora en el css en la clase principal definí un flexbos con justificación del contenido dejando espacio en el medio únicamente

    .mobile-menu {
      height: 100vh;
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

También noté que algunos márgenes debían modificarse para asemejarse más al diseño en el link de Zepelin:

    .mobile-menu ul:last-child {
      margin-bottom: 28px;
    }
    .mobile-menu div ul li {
      margin-bottom: 32px;
    }
    .mobile-menu .email {
      font-size: var(--sm);
      font-weight: 300;
      margin-bottom: 4px;
      display: inline-block;
    }

Y este es mi resultado final:

asi lo realice

.mobile-menu ul:nth-child(3){
    position: absolute;
    bottom: 0;
}

En el css puedes evitar escribir " !important " seguido del color de la clase .sign-out agregando antes la clase padre .mobile-menu , así:

.mobile-menu .sign-out {
    font-size: var(--sm);
    color: var(--hospital-green);
}

te quedaría el mismo resultado: Sign out, en color hospital-green evitando poner !important
,.
Saludos! excelente curso 😄

Resolví el reto de la saparación de la última lista de la siguiente manera:

.mobile-menu{
            display: flex;
            flex-direction: column;
            
            justify-content: space-between;
        }

Al utilizar justify-content: space-between; pude crear un espacio entre cada lista que garantice que la última quedara al final de la pantalla. Quedó del siguiente modo:

Me encanta este curso, me he dado cuenta que he aprendido muchas cosas; trato de hacer el diseño antes de ver la solución en la clase y, aunque casí siempre hago cosas de una manera diferente, se logra el resultado, para el reto yo lo que hice fue poner el correo en un <p> porque creo que es informativo, no un link, así que hice lo siguiente para separar y estilizar

.mobile-menu p{
    margin-top: 40px;
    color: var(--very-light-pink);
    font-weight: 300;
    font-size: var(--sm);
}
```Muchas gracias a Estefany por tanto conocimiento

Si están usando Visual Studio Code y quieren comentar una línea de código o varias , solo tienen que seleccionar lo que quieren comentariar y presionar las teclas CTRL + K + C y tambien funcionan para descomentariar

Asi fue mi solución:

      .mobile-menu {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 92vh;
        padding: 28px;
      }

Mi solucion html, parte:

        <ul class="personal-information">
            <li><a href="#" class="email">[email protected]</a></li>
            <li><a href="#" class="sign-out">Cerrar sesion</a></li>
        </ul>

css, parte:

.mobile-menu .personal-information{
    position: absolute;
    bottom: 0;
}

Mi solución al reto y que el scroll no encime el ultimo ul sobre los otros.

.mobile-menu{
       padding: 24px;
       display: grid;
       grid-template-rows: 1fr 1fr  auto;       
       height: 100vh;
   }

Hola a todos 😊. Aqui les dejo mi solucion al reto

.menu-mobile{
    padding: 24px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

Para evitar el

 !important

Agregamos más peso en nuestra especificidad

        .mobile-menu .email {
            font-size: var(--sm);
            font-weight: 300;
        }
        .mobile-menu .sign-out {
            color: var(--hospital-green);
            font-size: var(--sm);
        }

Y, aprovecho para dejar mi solución al reto 😁

 	    .mobile-menu ul:last-child {
            position: absolute;
            bottom: 0;
        } 

En esta clase murio un oso polar 🥲

Mi solución al reto:

.mobile-menu ul:last-child{
position: fixed;
bottom: 0;
}

.mobile-menu ul:last-child li{
margin: 0;
padding: 0;
}

Yo envolví en un div los dos primeros ul y agregué el siguiente css, me funcionó muy bien.

.mobile-menu {
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100vh;
      box-sizing: border-box;
}

.mobile-menu ul:last-child {
      margin-bottom: 40px;
}

Resultado:

En mi caso agregué dos div para poder usar flexbox y el space between. Luego en css agregué lo siguiente:

.mobile-menu {
    height: 100vh;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

Yo utilice las Pseudo clases para poder separar las diferentes listas que contiene la clase “.mobile-menu”; luego de identificar que cual es el ítem que quiero separar, utilice un margin-bottom para poder generar los espacios; a continuación comparto un fragmento del código:

<code> 
.mobile-menu ul:nth-child(1){
margin-bottom: 60px;
}
.mobile-menu ul:nth-child(3){
margin-bottom: 60px;
}

hola resolví los aportes de la siguiente manera…

    .mobile-menu ul:nth-child(3) {
        position: absolute;
        bottom: 0;
        margin-bottom: 25px;
    }

Este es el resultado, agregue un icono para cerrar el menu en mobile.

Solución para el CSS:

.mobile-menu ul:last-child{
	position: absolute;
	bottom: 0;
	margin-bottom: 28px;
}

para el reto coloque las ultimas dos ul en nuevo div, y a ese div

.under-section {
    height: 400px;
    display: flex;
    flex-direction: column ;
    justify-content: space-between; 
}

Comparto mi solución al reto

Este es el código

.mobile-menu{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 24px;
            height: 100vh;
            box-sizing: border-box;
        }

Y este el resultado final

Para el reto final le di un display grid a la clase mobile-menu y creé tres rows de 1fr cada, posterior a eso le di un align-self con la propiedad end para que se alinee al final.

.mobile-menu {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
}

.mobile-menu ul:last child {
	align-self: end;
}

.email {
font-size: var(–sm) !important;
font-weight: 300 !important;
margin: 0px !important;
}
.sign-out {
font-size: var(–sm) !important;
color: var(–hospital-green) !important;
margin: 0px !important;
}
.ultimate-li{
margin: 0px !important;
}

así es como quedo en la forma que lo hice

Mi solución fue desde el maquetado en HTML, lo que hice fue crear 3 section para dividir y así se me hizo más fácil trabajar, ya que en los estilos, prácticamente es lo mismo solo que agregas las clases y listo, no tuve que añadir más cosas ni nada…

Díganme que les parece?

Mi solución consistió en usar flexbox para las listas por temas de gusto visual el código creció un poco al implementarlo en cada una de las listas y este fue mi resultado:

.mobile-menu {
            display: flex;
            flex-direction: column;
            height: 95vh;
            padding: 24px;
        }

        .mobile-menu a {
            text-decoration: none;
            color: var(--black);
            font-weight: bold;
        }

        .mobile-menu ul {
            list-style: none;
            padding: 0;
        }

        .mobile-menu ul:nth-child(1) {
            border-bottom: 1px solid var(--very-light-pink);
        }

        .mobile-menu ul:nth-child(2) {
            display: flex;
            flex-direction: column;
            height: 100vh;
            justify-content: center;
        }

        .mobile-menu ul:last-child {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            height: 100vh;
        }

        .mobile-menu ul li {
            margin-bottom: 24px;
        }

        .email {
            font-size: var(--sm);
            font-weight: 300 !important;
        }

        .sign-out {
            color: var(--hospital-green) !important;
            font-size: var(--sm);
        }
.mobile-menu ul:nth-child(1),
.mobile-menu ul:nth-child(2){
    border-bottom: 1px  solid var(--very-light-pink);
    margin-bottom: 30px;

}
.mobile-menu ul:nth-child(3){
    margin-top: 80px;
}

esto fue lo que hice para el espacio entre listas

Les dejo mi solución:

 .mobile-menu {
        padding: 24px;
        height: 100vh;
        display: flex;
        flex-direction: column;
      }

 .mobile-menu ul:last-child {
        margin-top: auto;
      }
    .mobile-menu ul:nth-child(3) {
        margin-top: 100px;
    }

¡Creo que en la clase HTML Y CSS definitivo de Diego De granda él dijo que usar !Important es una mala práctica.

use flex para la solución, simplemente hice un div que englobara los dos últimos ul y puse justify-content: space between

<div class="bottom-section">
            <ul>
                <li>
                    <a href="" class="title">My orders</a>
                </li>
                <li>
                    <a href="" class="">My account</a>
                </li>
            </ul>

            <ul>
                <li>
                    <a class="email" href="">[email protected]</a>
                </li>
                <li>
                    <a class="sign-out" href="">Sign out</a>
                </li>
            </ul>
        </div>
.bottom-section{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

Holaaa 😁😁 acá esta como me quedo

Estaba bien como decía Estefany al principio
poner las dos clases (.mobile-menu .email) para evitar ese !important

Para evitar reutilizar estilos css lo ideal seria tener un main.css o global.css en donde esten las variables a reusar en los programas, esto acompañado de Less,Sass o Stylus

css


.menu-mobile ul:last-child{
            position: absolute;
            bottom: 0;
            margin-bottom: 12px;
        }

        .menu-mobile ul:last-child li{
            margin: 10px 0;
        }	

Hola a todos, esta es mi solución al reto:

.mobile-menu ul:nth-child(3){
	position: absolute;
	bottom: 1;            
}

Hola a todos, esta fue mi solucion al reto:
.mobile-menu ul:nth-child(3){
margin-top: 100px;
}
PD: No se como agregar imagenes a los comentarios, alguien que me ayude? jajaja

Hola, mi solucion fue primero dividir en dos div las ul uno donde van las dos primeras y en el segundo la ultima y al contenedor de todo le puse lo siguiente:

.mobile-menu {
padding: 24px;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}

Yo lo resolvi de este modo

 a.sign-out {
                 color: var(--hospital-green);
                 font-size: var(--sm);
             }
Con la especificidad no se lucha, lo mejor es utilizar alguna metodología como BEM para nombrar apropiadamente las clases. Sin bien es cierto que ITCSS menciona que se puede utilizar !important, es mejor no utilizarlos.

A mi me funciono mejor al resolver el reto, colocar un margin-top al ultimo ul

.mobile-menu ul:nth-child(3){
            margin-top: 100px;
        } 

ya que me di cuenta que en el diseño, el borde que está entre los primeros 2 ul esta justo en el centro de ambos

y hacer eso teniendo un display flex y usando space-between resultaba un poco mas difícil

Mi solución fue implementar una clase en el <ul> que contiene el menú que requiero mover con lo siguiente:

 .low{
            position: absolute;
            bottom: 0;
            margin-bottom: 24px;
 }

.mobile-menu ul:last-child{
padding-top: 50px;

}

font-weight: 300 !important; /* en éste caso se coloca !important, dado que por la especificidad, no toma en cuanta el font-weight de 300, si no el "bold" del padre */

list-style: none; /* para quitar el estilo por defecto de la lista */

Asi lo hice para no tener que usar el !important, al usar dos clases este le da mas peso (especificidad)

Asi lo hice para posicionarlo abajo.
.mobile-menu{
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 24px;
height: 90vh;
}

Yo lo hice así, no es mucho pero es un trabajo honesto 🤓

.mobile-menu ul:last-child {
      margin-top: 120px;
}

mi solucion fue :
el height: 92vh; es para que tome el alto completo de la pantalla sin que tenga scroll,

.mobile-menu{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 92vh;
    padding: 24px;
}

y para que el email se vea mas pegado al sign out

.mobile-menu ul:nth-child(3) li:nth-child(1){
    margin-bottom: 4px;
}

Mi solución fue utiliza flex.

Solución al reto

    .mobile-menu ul:nth-child(3) {
        position: relative;
        top: 100px;
    }

Lo hice con un relative pero también se puede hacer con un absolute de bottom 0

Comparto mi código

HTML

<header>
        <nav class="mobile-menu">
            <ul>
                <li><a href="/">CATEGORIES</a></li>
                <li><a href="/">All</a></li>
                <li><a href="/">Clothes</a></li>
                <li><a href="/">Electronics</a></li>
                <li><a href="/">Furnitures</a></li>
                <li><a href="/">Toys</a></li>
                <li><a href="/">Others</a></li>
            </ul>
            <ul>
                <li><a href="/">My orders</a></li>
                <li><a href="/">My account</a></li>
            </ul>
            <ul class="menu-end">
                <li><a href="/" class="menu-email">[email protected]</a></li>
                <li><a href="/" class="menu-signout">Sign out</a></li>
            </ul>
        </nav>
    </header>

CSS

No use el important.

:root {
            --black:#000000;
            --white: #FFFFFF;
            --very-light-pink: #C7C7C7;
            --text-input-field: #F7F7F7;
            --dark: #232830;
            --hospital-green: #ACD9B2;
            --sm: 1.4rem;
            --md: 1.6rem;
            --lg: 1.8rem;
        }
        html {

            font-size: 62.5%;
        }
        body {

            margin: 0;
            font-family: 'Quicksand', sans-serif;
        }
        .mobile-menu {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            height: 500px;
            padding: 2.4rem;
        }
        .mobile-menu ul {
            padding: 0;
            list-style: none;
        }

        .mobile-menu ul:nth-child(1) {
            border-bottom: 0.1rem solid var(--very-light-pink);
        }
        .mobile-menu ul li {
            margin-bottom: 2.4rem;
        }
        .mobile-menu a {
            text-decoration: none;
            color: var(--black);
            font-weight: bold;
        }
        .mobile-menu .menu-end li{
            margin: 0;
        }

        .mobile-menu .menu-email {
            font-size: var(--sm);
            font-weight: 300;
        }
        .mobile-menu .menu-signout {
            font-size: var(--sm);
            color: var(--hospital-green);
        }

Lo que yo hice fue darle id al “ul” que contenia el correo y el sign out, luego en “style” le puse “padding-top: 80px;” y con eso pude bajarlo sin necesidad de usar !important 😄

<ul id=“last-module”>
<li>
<a href="" class=“email”>[email protected]</a>
</li>
<li>
<a href="" class=“sign-out”>Sign out</a>
</li>
</ul>
</div>
</body>
</html>

Para que quede lo mas parecido al diseño final desde donde lo dejo la profesora, con añadir esto quedaría bien:

.mobile-menu ul:nth-child(2){
margin-top: 60px;
}

.mobile-menu ul:nth-child(3){
position: absolute;
bottom: 0;
}

Hello World!!!
Esta es mi solución

Mi CSS con la elegancia de francia:

Mi avance hasta el momento, super contenta.

Este recurso me parece súper útil para saber qué tags podemos colocar dentro de otros tags de HTML ya que dentro de un tag HTML no podemos agregar los que queramos por buenas prácticas, accesibilidad, etc.

usé este código para el email y sign-out

      .mobile-menu ul:last-child{
         position: absolute;
         bottom: 8px;
      }

Reto terminado. Agregue un display flex y modifique un poco los margin de los elementos ul

        .mobile-menu{
            height: 90vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .mobile-menu ul:nth-child(1){
            border-bottom: 1px solid var(--very-light-pink);
            margin: 24px 0 0 0;
        }
        .mobile-menu ul:nth-child(2){
            margin: 0 0 64px 0;
        }

Hola para hacer la separación de los últimos dos “ul” lo que hice fue escribir:

.mobile-menu ul:nth-child(3){
padding-top: var(–lg1);
}

Ya que necesitamos separar los últimos dos le coloque un padding en la parte superior al que estaría en la tercera posición con el nth-child, pero para no colocar pixeles sueltos cree una nueva variable mucho mas grande que le llame “–lg1” de 30px y pues el resultado es muy parecido al diseño, no se que tantos errores estoy cometiendo pero me funciono, espero les sirva. Acepto mejores maneras de como lo hubieran hecho.

Mi reto es con algo que nos enseñó el profe Diego de Granda.

.mobile-menu ul:nth-child(3) {
        position: absolute;
        bottom: 0;
      }

Buen día,
Solucione el reto de esta forma:

.mobile-menu ul:nth-child(2) {
            padding-bottom: 12px;
        }

Yo estoy intentando hacerlo todo por mi cuenta, el problema final no me surigio ya que lo hice todo con flex-box, asi que aqui esta mi solucion 😛

 .mobile-menu{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    padding: 50px;
}
.mobile-menu h1{
    text-align: start;
}
.mobile-menu ul:not(:last-child){
    border-top: 1px solid var(--pink)
}
.mobile-menu ul:not(:last-child) li{
    margin: 30px 0;
    font-weight: 800;
}
.mobile-menu ul:last-child li:first-child{
    font-weight: 300;
}
.mobile-menu li a:not(.sign-out){
    color: var(--black);
}
//entre otros estilos globales

Mi aporte al reto de Teff

.mobile-menu ul:nth-child(2) {
        margin-bottom: 24px;
        display: inline-block;
      }

Resolvi el reto con esta linea

 .mobile-menu ul:nth-child(3){
            margin-top: 73px;
        }

tambien me di cuenta que si le doy mas peso al elemento que quiero modficar no necesito utilizar el !important

 .mobile-menu .email{
            font-size: var(--sm);
            font-weight: 300;
        }
        .mobile-menu .sign-out{
            font-size: var(--sm);
          
            color: var(--hospital-green);
        }
 .mobile-menu ul:last-child{
    position: relative;
   top: 50px;
  }

![](

  • Yo lo resolví así
        .mobile-menu ul:nth-child(2) {
            margin-bottom: 100px;
        }

Mi solución al reto

.mobile-menu {
        padding: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100vh;
    }
.mobile-menu ul:last-child {
        margin-bottom: 24px;
}

**Hola **
Así voy yo con el ejercicio de la clase, yo traté de seguir con la temática de bienes raíces.

yo solo delimite el margin Top y el Bottom
![](
asi se ve, no se que tan bien este al solo usar una linea

Mi aporte usando un div extra (basado en el aporte de Gustavo Gonzalez Montero) ✌

HTML con div extra:

  <body>
    <div class="mobile-menu">
      <div> <!-- div agregado -->
        <ul>
          <li>
            <a href="/">CATEGORIES</a>
          </li>
      . . .
            <a href="/">My account</a>
          </li>
        </ul>
      </div><!-- cierre del div -->

      <ul>
        <li>
          <a class="email" href="/">[email protected]</a>
        </li>
        <li>
          <a class="sign-out" href="/">Sign out</a>
        </li>
      </ul>
    </div>
  </body>

CSS

.mobile-menu {
        padding: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 95vh;
      }

.mobile-menu div ul li {
        margin-bottom: 32px;
      }
.mobile-menu > ul li:first-child {
        margin-bottom: 4px;
      }

    @media(max-width:640px){
        .mobile-menu{
            padding:24px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100vh;
        }

        .mobile-menu ul:last-child{
            margin-bottom: 25px;
        }
    }

Lo solucione de la siguiente forma, gracias al problema de la clase pasada y a la ayuda de los demás comentarios de mis compañeros ❤️

y así quedo !!!

Solución al reto:

   .mobile-menu{
            display: flex;
            flex-direction: column;            
        }

mi solucion fue esta :

.mobile-menu ul:last-child {
	position:absolute;
	bottom: 0;
}

creo que es mas cuestión de ser especifico:

.mobile-menu .sign-out 

css

.mobile-menu {
	padding: 0 24px 0;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	height: 100vh;
 }

.mobile-menu ul:nth-child(1) {
	border-bottom: 1px solid var(--very-light-pink);
	padding-bottom: 70px;
}

result:

excelente me encantan las lases practicas

He visto que muchos compañeros usaron position absolute y margin bottom 0, el problema de esto es que si reduces el alto del display la ultima lista se super-pone encima de las otras listas, y esa no es la mejor práctica. Si encapsulamos las dos listas en div y la ultima tambien; y al padre (.mobile.menu) le ponemos un display flex, flex direction column, justifiy-content space between y height 100vh evitamos esto. Explico ahora los matices que habría que pulir.
Primero el div padre quedaría asi:

.mobile-menu {
            padding: 0 24px 0 24px;
            display: flex;
            height: 100vh;
            flex-direction: column;
            justify-content: space-between;
        }

Como puedes ver he quitado los padding top y bottom, esto es para que no haya un pequeño scroll vertical. Pero sin problema, porque estos padding se los podemos poner a los div hijos. En mi caso encapsule los dos primeros ul en un div y el tercer ul en otro div, de la siguiente manera:

<div class="menu-top"> 
            <ul>
                <li>
                    <a href="/">CATEGORIES</a>
                </li>
                <li>
                    <a href="/">All</a>
                </li>
                <li>
                    <a href="/">Clothes</a>
                </li>
                <li>
                    <a href="/">Electronics</a>
                </li>
                <li>
                    <a href="/">Furnitures</a>
                </li>
                <li>
                    <a href="/">Toys</a>
                </li>
                <li>
                    <a href="/">Others</a>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="/">My orders</a>
                </li>
                <li>
                    <a href="/">My accounts</a>
                </li>
            </ul>
        </div>
        <div class="menu-bottom">
            <ul>
                <li>
                    <a href="/" class="email">[email protected]</a>
                </li>
                <li>
                    <a href="/" class="sign-out">Sign out</a>
                </li>
            </ul>
        </div>

Y les añadí los siguientes padding:

        .mobile-menu .menu-top{
            padding-top: 24px;
        }

        .mobile-menu .menu-bottom{
            padding-bottom: 24px;
        }

Ahora vemos que queremos el border bottom que puso Estefany se duplica, ya que como hay dos div que encapsulan la ul, coge las primeras ul de las dos listas y les pone el border, para eso debemos cambiar .mobile-menu ul:nth-child(1) por:

       .mobile-menu .menu-top ul:nth-child(1){
            border-bottom: 1px solid var(--very-light-pink);
        }

Y listo, es verdad que es mas tedioso, pero a mi parecer es la mejor práctica, os dejo una imagen de como os deberia quedar:

Un saludo y nunca paréis de aprender.

De esta manera lo resolvi.

La solucion al reto por mi parte es:

.mobile-menu ul:last-child {
position: absolute;
bottom: 0;
}

Mi código

<!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">
    <meta name="description" content="This is store of whatever">
    <meta name="robots" content="index, follow">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];400;500;600;700&family=Roboto:[email protected]&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles/style.css" type="text/css" >
    <link rel="shortcut icon" href="./logos/favicon_bota_fora.svg" type="img">
    <title>Yard Sale</title>
    <style>
        a{
            text-decoration: none;
        }
        li{
            padding: 0;

            list-style: none;
        }
        ul{
            margin: 0;
            padding: 0;
        }
        .logging-menu{
            height: 100vh;
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: 60% 20% 20% ;
            padding: 2rem;
            padding-left: 3rem;
        }
        .container
        {
            align-self: center;
            border-bottom: .1rem solid gainsboro;
        }
        .logging-menu__title{
            margin: 0 0 3rem 0;
            font-size: var(--lg);
            text-transform: uppercase;
        }
        .list-container--account{
            align-self: flex-end;
        }
        .list-container--orders{
            align-self: center;
        }
        .list-item{
            margin-bottom: 4.4vh;

            font-size: var(--md);
            font-weight: bold;
        }
        .list-item--email{
            margin-bottom: 1rem;

            font-size: var(--sm);
            font-weight: lighter;
        }
        .list-item--sign-out{
            font-size: var(--sm);
            font-weight: bolder;
            color: var(--hospital-green);
        }

    </style>
</head>
<body>
    <nav class="logging-menu">
        <section class="container">
            <h3 class="logging-menu__title">Categories</h3>
            <ul class="list-container list-container--products">
                <li class="list-item">All</li>
                <li class="list-item">Clothes</li>
                <li class="list-item">Electronics</li>
                <li class="list-item">Furnitures</li>
                <li class="list-item">Toys</li>
                <li class="list-item">Others</li>
            </ul>
        </section>
        <ul class="list-container list-container--orders">
            <li class="list-item">My orders</li>
            <li class="list-item">My account</li>
        </ul>
        <ul class="list-container list-container--account">
            <li class="list-item list-item--email">[email protected]</li>
            <li class="list-item list-item--sign-out">Sign out</li>
        </ul>
    </nav>
</body>
</html>

Mi solucion

.mobile-menu ul:nth-child(3) {
	position: absolute;
	bottom: 24px;
}

Hola! otra opción para resolver el tema de la especificidad en el email sería agregándole peso al selector en mi caso usé

.mobile-menu .email

<div class=“menu-account”>
<ul>
<li><a href="#" class=“title”>My orders</a></li>
<li><a href="#">My account</a></li>
</ul>
<ul>
<li><a href="#" class=“email”>[email protected]</a></li>
<li><a href="#" class=“sign-out”>Sign up</a></li>
</ul>
</div>

.menu-account {
  display: flex;
  flex-direction: column;
  height: 40vh:
  justify-content: space-between;
}
.menu-account ul:last-child {
  margin-top: 0;
}

Mi solucion

.mobile-menu ul:nth-child(2) {
            margin-top: 24px;
        }
        .mobile-menu ul:nth-child(3) {
            position: absolute;
            bottom: 0;
        }

Añadido a mi solucion, esta esta correcion que hice al margin bottom de los li del tercer lu (el del correo y log out) ya que en la guia de diseño no estan tan separados.

.mobile-menu ul:nth-child(3) li{
            margin-bottom: 10px;
        }

Hola chicos, para resolver el reto separé la ultima parte de la lista y quedó así:

    <ul>
        <li>
            <a href="/" class="email">[email protected]</a>
        </li>            
        <li>
            <a href="/" class="sign-out">Sign Out</a>
        </li> 
    </ul>

y en la parte de los estilos:
.mobile-menu ul:last-child{
position: absolute;
bottom:0;
}

Para solucionar el reto añadí un margin-top al tercer ul.

.mobile-menu ul:nth-child(3) {
          margin-top: 80px;
      }

Sin utilizar el !Important he colcoado este simple css:

.mobile-menu {
    padding: 0 24px;
}

.mobile-menu ul {
    list-style: none;
}

.mobile-menu ul li {
    text-align: start;
    padding-bottom: 38px;
}

.mobile-menu > ul li:first-child {
    padding-top: 38px;
}

.mobile-menu ul li a {
    text-decoration: none;
    color: var(--black);
    font-size: var(--md);
    font-weight: bold;
    display: inline-block;
}

.mobile-menu .email a {
    font-size: var(--sm);
    color: var(--black);
    font-weight: 400;
}

.mobile-menu .email {
    padding-bottom: 6px;
}

.mobile-menu .signout a {
    font-size: var(--sm);
    color: var(--hospital-green);
    font-weight: bold;
}

Hola, lo resolví de la siguiente forma:
.mobile-menu ul:nth-child(2) {
display: inline-block;
margin-top: 50px;
}
.mobile-menu ul:last-child {
display: inline-block;
margin-top: 80px;
}