No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aplicando media queries

29/32
Recursos

En esta parte necesitamos realizar un an谩lisis de lo que hemos trabajado para identificar en qu茅 partes y en qu茅 dimensiones debemos cambiar la posici贸n de ciertos objetos. Entonces vamos a la vista que nos arroja el navegador.

Analizando nuestro proyecto

Como ya sabes, debemos tener un m铆nimo de dise帽os para tres versiones: celular, tablet y escritorio. Es decir, tres archivos CSS linkeados en nuestro archivo index.html. Los colocamos en el siguiente orden:

  1. Hoja de estilos principales (styles.css)
  2. Hoja de estilos para tablet (tablet.css)
  3. Hoja de estilos para desktop (desktop.css)

Como puedes ver, se agregan de menor a mayor tama帽o, porque estamos trabajando desde Mobile First. En este caso hay pocos elementos en nuestro proyecto, por lo que agregar una vista m谩s nos bastar谩 para obtener buenos resultados.

    <link rel="stylesheet" href="./styles.css">
    <link rel="stylesheet" href="./css/tablet.css" media="(min-width: 930px)">

Es importante que especifiquemos en la propiedad media, el ancho m铆nimo que necesita tener la pantalla para descargar este archivo. De esta manera evitaremos que el usuario tenga que descargar todos los archivos cuando solo va a usar uno.

Ahora vamos a trabajar en las secciones que necesitan unos cuantos ajustes.

Ajustando la secci贸n de tablas

Al pasar a pantallas m谩s grandes se genera demasiado espacio alrededor de las tablas. Colocarlas una al lado de otra ayuda a tener menos scroll vertical y una vista m谩s c贸moda para el usuario.

Para ello:

  • Llamamos la clase del contenedor de las tablas con .main-tables-container.
  • Usamos display: flex para que las tablas se acomoden juntas.
  • Ajustamos el ancho a 930px para que no crezca m谩s de eso.
  • Centramos las tablas con margin: 0 auto.
.main-tables-container {
    display: flex;
    width: 930px;
    margin: 0 auto;
}

Ajustando la secci贸n de beneficios

Tenemos el mismo problema que el anterior. Hay demasiado espacio sobrante en el que debemos reacomodar los elementos.

Para ello:

  • Llamamos la clase contenedora de las tarjetas con .product-cards鈥揷ontainer.
  • Las acomodamos al ancho de la caja con display: flex.
  • Acomodamos las cajas en columnas con flex-wrap: wrap.
  • Limitamos el crecimiento de la caja en 930px. As铆 nos aseguramos que no se vayan a crear m谩s de dos columnas.
  • Centramos las tablas con margin: 0 auto.
.product-cards--container {
    display: flex;
    flex-wrap: wrap;
    width: 930px;
    margin: 0 auto;
}

Ajustando la secci贸n de planes

Como podemos observar, las tarjetas de planes se quedan a la izquierda de la pantalla al superar dimensiones de 930px. Esto se debe a que usa display: flex para funcionar.

Por lo que sin cambiarlo, agregamos una simple l铆nea de c贸digo a la clase del mismo contenedor:

  • Centra el contenido con justify-content: center.
.plans-container--slider {
    justify-content: center;
}

Esta parte result贸 mucho m谩s sencillo, 驴verdad? Aplicamos muy pocas l铆neas de CSS y nos tom贸 poco tiempo saber qu茅 elementos necesitaban ser reacomodados. Esto es porque estamos trabajando desde Mobile First.

Muchas veces es m谩s f谩cil dise帽ar desde lo peque帽o y luego ir creciendo seg煤n la necesidad de la pantalla que hacerlo al rev茅s.

Ya s贸lo nos queda evaluar la p谩gina que hemos creado para comprobar temas de accesibilidad y buenas pr谩cticas. 隆Genial!

Contribuci贸n creada por: Jos茅 Miguel Veintimilla (Platzi Contributor).

Aportes 126

Preguntas 49

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Cuando inici茅 como frontend, una de las cosas que me romp铆a la cabeza era: 驴Qu茅 breakpoints utilizo?

Antes los desarrolladores seleccionaban las dimensiones de los dispositivos m谩s populares del momento y establec铆an esas dimensiones como sus breakpoints, sin embargo, hace unos a帽os comenz贸 una mejor pr谩ctica que es capaz de resumirse en una bella frase de Scott Yale: 鈥淓n lugar de utilizar breakpoints predefinidos, debemos ser capaces de encontrar nuestros propios breakpoints utilizando nuestro contenido como gu铆a鈥.

Para complementar el lo aprendido en el curso, les comparto dos links, compa帽eros, el primero es un art铆culo sobre los distintos tipos de breakpoints que existen en el dise帽o web moderno. Y el segundo es un video que muestra c贸mo se utilizan los minor-breakpoints:

Termine el curso en PlatziDay

Pens茅 que no lo lograr铆a.
La verdad si bien he aprendido mucho en los primeros cursos de la escuela de desarrollo web鈥
No me sent铆a capaz de hacer este proyecto cuando lo anunciaron.
y wow he llegado al final.
No me queda mas que decir gracias. Gracias Platzi, Gracias Diego, Gracias compa帽eros de la comunidad que siempre estar ah铆 para responder y ayudar.

Les dejo los links para que se puedan apoyar si as铆 lo requieren.
Repositorio de GitHub
Web Online

Si le quieren dar un efecto parallax a su imagen en desktop, pueden usar la propiedad background-attachment: fixed en la imagen de background

.main-image-container {
    background: url(./assets/img/bitcoinbaby4x.jpg) no-repeat center/cover;
    background-attachment: fixed;

Aqui pueden ver el resultado.

  • Pueden aplicarlo desde mobile si gustan.

Para los que les sale un scroll cuando est谩n en modo desktop
solo tienen que hacer lo siguiente

.plans-container--slider{
    overflow-x: unset;
}

Aquellos que tuvieron inconvenientes aplicando el flex product-card鈥揷ontainer
porque usaron la misma clase para todas las dem谩s tarjeta, le dejo lo que hice para resolverlo, simplemente met铆, todas las tarjetas en una seccion y le asigne una clase y a esa clase si le aplique el estilo en tablet.
![](

Alternativa con grid para las cards

Algo que estaba esperando es REM en las Media Queries. Creo que a medida que la pantalla sea m谩s grande las letras tambi茅n deben aumentar de tama帽o. Lo acomode solo con modificar esta linea en tablet.css

html{
    font-size: 80%;
}

Antes:

Despues:

Pd. Gracias Diego por mostrarnos REM

Otra manera de colocar las dos tablas:

.main-currency-table, .main-commission-table {
    display: inline-block;
    width: 49%;
}

Para eliminar el _scroll _ del slider, ya que queda bastante mal desde una pantalla grande que se vea una barra de scroll que encima no hace nada jajaja.

.plans-container__slider {
    justify-content: center;
    overflow-x: hidden;
}

SI no les funciona es porque el contenedor al que le est谩n aplicando los estilos de tablet no es el contenedor padre de solo esas cajas, recomiendo colocar un nuevo section que abarque solos las 4 cajas.

7 Habits of Highly Effective Media Queries

  • Let content determine breakpoints.
  • Treat layout as an enhancement.
  • Use major and minor breakpoints.
  • Use relative units.
  • Go beyond width.
  • Use media queries for conditional loading.
  • Don鈥檛 go overboard.

Quiero compartir mi resultado:
Repositorio de Github: https://github.com/santigo171/Batatabit
P谩gina en GIthub Pages: https://santigo171.github.io/Batatabit/

Una foto de una parte donde lo hice diferente:

Les recomiendo usar, overflow-x: initial; para que se quite la barra de scroll en la pantalla despues de 930px.

Cambios adicionales: se le puede cambiar el size de las fuentes ya que en una pantalla mas grande las letras quedan peque帽as.

Otra manera de colocar las dos tablas:

.main-currency-table, .main-commission-table {
    display: inline-block;
    width: 49%;
}

Para eliminar el scroll del slider, ya que queda bastante mal desde una pantalla grande que se vea una barra de scroll que encima no hace nada jajaja.

.plans-container__slider {
    justify-content: center;
    overflow-x: hidden;
}

鉁 Con los media queries y unos fix m谩s esta terminado (demo en CodePen y repositorio en GitHub)

.
Tomo su tiempo, 20h 馃槸鈥 me gusto mucho hacer los retos, era dif铆cil pero divertido (el gr谩fico lo saque usando la extensi贸n Wakatime de VS Code)

Para las versiones de escritorio a帽ad铆 el siguiente CSS a cada tarjeta de los planes para que tenga un efecto llamativo al pasar el cursor por encima de cada una:

.plans-detail__card:hover {
    box-shadow: 0px 4px 8px rgba(26, 25, 25, 0.5);
    transform: scale(1.05);
    transition: all 0.5s ease;
}

Mis tablas no estan centradas. Aprentemente la tabla de currency tiene mas margen que la de comisiones aunque las dos esten en margin: 0 auto. Que puedo hacer? 驴alguna propiedad para intentar arreglarlo?

As铆 me quedo, a煤n soy nuevo en esto pero mas adelante meter茅 animaciones y CSS grid en ves de tablas de HTML. Por el momento este es mi resultado.!
https://gerard-strock.github.io/Batatabit-1.0/#plans

Otra forma de hacer tus media queries en el mismo archivo Style.css

@media screen and (min-width: 740px){
    .plans__slider{
        justify-content: center;
        overflow-x: hidden;
    }
}

@media screen and (min-width: 900px){
    .card__container{
        display:flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
}

OJO, al separar los archivos css y ponerle un breakpoint a la etiqueta link, no hacemos que 鈥渟olo se cargue el archivo necesario鈥. Se cargan todos los archivos css, pero el navegador da preferencia al archivo correspondiente al tama帽o del navegador en ese momento. De esta manera, por ejemplo, si estamos en un celular cargar铆a primero los archivos para mobile, dandoles preferencia, asi nuestra p谩gina web estar谩 lista m谩s rapido que si cargara todos los archivos css a la vez.

Les dejo mi solucion para el scroll de las tablas

scrolll de monedas / comisiones

Mi resultado para el scroll aplicado en la secic贸n de las tablas:

Muy buen curso.

Entre 930 y 940 me aparece un scroll horizontal y un ligero margen blanco, por m谩s que reviso no s茅 por donde pueden ir los tiros, o por donde meterlo mano.

Un saludo y gracias.

Que tal champion buen dia, fantastico curso鈥 Gracias equipo Platzi.
鈥 Saludos.





Hice mi mayor esfuerzo y aqui mi resultado.

Dejo por aqu铆 mi proyecto:
bitcoin-site

Queremos que el navegador cargue justo en el break point que nosotros estamos buscando

<link rel="stylesheet" href="./css/tablet.css" media="(min-widht: 930px)" />```

Reto terminado, ahora como reto personal ser谩 realizarlo por mi propia cuenta.

https://edgardoavs.github.io/Batabit/

  • Desktop view
  • Mobile view

Yo realice algunos cambios en la versi贸n de escritorio (tablet) para que se viera un poco mejor (seg煤n a mi criterio), Lo primero fue hacer mas larga la cabecera, siento que estaba muy peque帽a en Escritorio tambi茅n aumentar el tama帽o del logotipo y re posicionar el bot贸n del CTA
.

.
Lo segundo fue hacer un poco mas peque帽as las tarjetas para que no se vieran tan anchadas
.

.
Les comparto mi c贸digo de tablet.css

header {
    height: 534px;
}

header img {
    width: 350px;
    height: 44px;
}

.header--title-container {
    margin-top: auto;
}

.header--title-container .header--button  {
   margin-top: 250px;
}


.main-tables-container {
    display: flex;
    width: 930px;
    margin: 0 auto;
}

.product-cards--container {
    display: flex;
    flex-wrap: wrap;
    width: 930px;
    margin: auto;
}

.plans-container--slider {
    justify-content: center;
}

.plans-container--card {
    max-width: 200px;
    margin: 50px 40px 0;
}

Si alguien se pregunta como fue que oculte el scrollbar sin afectar su funcionamiento fue creando un pseudoelemento

  .plans-container--slider {
      display: flex;
      height: 316px;
      overflow-x:scroll;
      overscroll-behavior-x: contain;
      scroll-snap-type: x proximity;
  }
  /*Ocultamos la visibilidad del scrool*/
  .plans-container--slider::-webkit-scrollbar {
      display: none;
  }

Me ha encantado este curso, he aprendido cosas muy buenas y pr谩cticas. Gracias Diego sos un gran profesor!

Aqu铆 les dejo mi dise帽o, en tama帽o para pantallas grandes y para dispositivo m贸vil鈥

Antes de comenzar el responsive design me imaginaba un sheet completo con media queries para generar las vistas de los diferentes dispositivos! Despues del curso he aclarado completamente como generar una vista de cualquier dispositivo de la forma correcta. 馃槂

Para los que deseen, en el mismo dise帽o de Figma est谩n definidos algunos breakpoints, cambiando tanto el tama帽o de los elementos como la disposici贸n de los mismos. Les dejo el Link:
https://www.figma.com/file/sMmlQaZldfDcLERYYWe6h4/Bata-Bit?node-id=363%3A210

Buenas practicas:
Empezar el proyecto pensando en mobile luego ir creciendolo hasta desktop.

cada clase de Diego aprendo algo nuevo, y algo muy profesional. Saludos.

Me gusta mucho el curso.Quiero aprender mucho,es la meta.

Siempre he maquetado primero la versi贸n desktop primero y luego aplicando media queries la versi贸n Mobile. Varias veces hacer la versi贸n Mobile me resulto un dolor de cabeza. La verdad que esta t茅cnica se ve buena, voy a implementarla en mis futuros proyectos.

increible curso enserio a mi siempre me ha costado el mobile first pero esta vez lo entendi perfecto

Vaya!! Muy pr谩ctico. Antes ten谩s que cambiar muchas cosas (mi caso), y terminabas odiando (por momentos), las 鈥淢edia Queries鈥.

Joder, qu茅 cosa linda el CSS!
As铆 vamos:
https://donnyvasquez.github.io/cursoMobileFirts/

As铆 quedo hasta el momento:

Le agregu茅 el siguiente c贸digo para mejorar el footer;

footer .left ul{
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    width: 930px;
    justify-content: center;
}
.left a{
    margin: 10px;
  }

Bueno, aqui estan en las 3 pantallas鈥 No pude hacer lo de las flechitas de los sliders, T_T. Me deprimi. Bueno a seguir estudiando.

Me encanto este curso, despu茅s de hacer el definitivo de CSS y HTML hacer este me ayudo a practicar y a aprender mucho mas, muchas gracias.
as铆 se ve en laptop:

Muy feliz de llegar a este punto

Si quieren ocultar la scrollbar cuando pasan a tablet o laptop de la secci贸n de planes, pueden usar:

.plans-container--slider::-webkit-scrollbar {
  display: none;
}

Lo agregan en tablet.css para que solo se oculte cuando est茅n en un dispositivo de ese tama帽o.

Hola una pregunta 驴Saben por que no puedo hacer esta parte en dos columnas?

Puedes aqui cambiar la imagen por una de mejor calidad ya que se expande. y dejar lad e menor calidad en mobiles mas peque;os

<code>
.bitcoin-img-container {
    background-image: url('../imgs/bitcoinbaby2.jpg');
}

Estoy super contenta con los resultados. Buen铆simo el curso!

Hola! No se explica c贸mo se inserta el 鈥渉iperv铆nculo鈥 entre el bot贸n 鈥渃onoce nuestros planes鈥 y la parte de las tarjetas donde se muestran los planes. Entonces, lo explico:

En el bot贸n, debemos agresar el href as铆:

<a href="#plans" class="header--button">Conoce nuestros planes <span></span> </a>

y ANTES de la secci贸n: <section class=鈥渕ain-plans-container鈥>

Se colocar铆a:

<a name="plans" id="plans"></a> 

Para los que les sale un scroll en desktop pongan la opcion de **auto **donde configuran el slider

despues de 2 a帽os vuelvo a tomar este curso y esta de 10! bien por platzi!!!

yo a帽adir铆a

.product-detail鈥揷ard {
width: 50%;
}

en vez del width: 930px 鈥

Me gusta lo que estamos haciendo

me salio

Sent铆a que no progresaba muy bien en frontend. Volv铆 a tomar el curso de HTML y CSS nuevamente para fortalecer los conceptos. En este curso apliqu茅 el paradigma de CSS at贸mico y enfocado en utilidades y me di cuenta que si empezamos con mobile first, al momento de hacer los estilos responsive, toma muchas menos l铆neas. Solo cuando se desarrolla desde mobile, el CSS es inmenso, a煤n as铆 es gratificante saber que logr茅 usar este enfoque en un curso donde ni si quiera se lo aplica, pero a煤n asi, sigue sirviendo el curso.

tremendo las normas para crear mediaqueries 馃槃
Quedo genial

yo le agregue esto al tablet.css para que los elementos del footer queden mas centrados, me parece que queda mejor.

footer {
  justify-content: center;
}

footer section {
  width: 30%;
}

Muy buen curso y logre llegar al resultado final sin necesitas de break points.

Un punto interesante para la discusi贸n ser铆a el hecho de utilizar media queries directamente en el archivo inicial, sin agregar otra etiqueta link en el <head>. Puede que el "peso" adicional de esas l铆neas sea despreciable e incluso el overhead de la conexi贸n http adicional que tiene que hacer el navegador para descargar un nuevo archivo sea mayor. Dependiendo de la situaci贸n puede llegar a ser contraproducente, tambi茅n ser铆a importante decidir en funci贸n del dispositivo mayoritario que utilizan los visitantes para consumir el website (algo que puede conocerse con el tiempo mirando, por ejemplo, Google Analytics o similares).

As铆 qued贸 la web para desktop y tablets

驴Quieres adaptar el contenido de tu proyecto a pantallas m谩s grandes?

驴Quieres obtener el siguiente resultado para el scroll de las tablas en pantallas m谩s grandes?

驴Quieres obtener el siguiente resultado para el scroll de las tablas?

Mi aporte a la clase, actualice sin cambiar de lugar phone.css a dentro de la carpeta y tuve una sorpresa al ver la p谩gina en su esqueleto.
Tomar茅 la casualidad de p谩ginas futuras, borrar el link de css temporalmente, solo para observar el HTML.

Hlola, el justify content no es necesario ponerlo en los media queries, puedes ponerlo en el archivo normal , si el contenedor no es lo suficientemente grande creara el scroll horizontal y si lo es lo centrara:)

Para la gente que tiene problemas con los estilos en modo tablet en la secion de monedas yo lo resolvi poniendo las dos card en un div con una clase luego en table.css hice los respectivos estilos

.card-cont {
  display: flex;
  width: 930px;
  margin: 0 auto;
  justify-content: center;
  gap: 200px;
}

Muy interesante el media en el link de enlace de css a tablet, no conocia este atributo. Siempre creemos sabernoslas todas y en ests cursos aprendemos cosas nuevas.

Les comparto mi resultado.
Batatabit

resultado media query con justify content

S煤per emocionado con todo lo aprendido durante el curso y lo bien explicado por parte de Diego de la tem谩tica y partes tratadas. Muchas gracias a Platzi.

Vista Mobile

Vista adaptada

si agregan: scroll-behavior: smooth; en la etiqueta html (raiz) el call to action se desliza hacia abajo mas suavemente

Eliminar elementos y barra de scroll

.plans-container__slider{
    overflow-x: hidden; /*Elimina la barra de scroll*/
}
.plans-container__card a{
    display: none; /*Elimina el elemento a*/
}

Antes

Despu茅s

.main-tables--container

.products-cards--container

.product-card--container

.plans-container--slider

tablet.css

Al final me quedo asi con los media querys implementados

Tuve que aplicar de esta manera:

.plans-container--slider {
    justify-content: center;
    width: 930px;
    margin: 0 auto;
}

Porque si dejaba solamente justify-content: center; no se centraba, asi que le agregue el width y el margin.

yo ese reto de las primeras dos tarjetas lo hice desde las primeras clases jajaja me mate la cabeza pensando en como hacerlo y hasta apenas lo dejo xd

Alguien sabe como se puede hacer para esconder las flechas con mediaqueries

En mi caso con el slide de las 鈥渕onedas鈥 y 鈥渃omisiones鈥 pod铆a hacer scroll en medio de las dos tablas, para solucionarlo cambie:

    scroll-snap-type: x proximity;
    scroll-snap-type: x mandatory;

鈥淧roximity鈥 si funciona con 3, pero con dos no me funcion贸.

En los dispositivos not茅 que la letra era m谩s peque帽a, as铆 que aprovech茅 que los font-size utilizaban rem para cambiar el tama帽o en el body

html{
    font-size: 70%;
}

Tuve problemas con los tama帽os de unos contenedores, pero lo arregl茅 poniendo auto

Soy nuevo en esto y para ajustar las tablas de Monedas y Comisiones y que no se vieran divididas en la misma pesta帽a:

CSS:

.main-tables-container {
  display: flex;
  overflow-x: scroll;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}

.main-currency-table {
  flex: 1 0 100%;
  scroll-snap-align: start;
  width: 70%;
  min-width: 235px;
  max-width: 500px;
  height: 360px;
  margin: 0 auto;
  font-family: "Inter", sans-serif;
  
}

Alguna recomendaci贸n?

Mas cursos para Diego por favor鈥s un profesor excelente.

Se que ya es un poco tarde desde que se public贸 el curso, pero quisiera compartir el resultado de mi proyecto desde mi GitHub.
Estar茅 pendiente a cualquier feedback. Saludos!

En la secci贸n de cartas de producto tambien se puede hacer con grid:

.product__cards__container
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 930px;
    margin: 0 auto;
}

el resultado es el mismo![](

Ya tenia listo ese scroll hacia dos clases , Reto cumplido.

Antes, viendo en figma, no entend铆a por qu茅 Diego le pon铆a a los t铆tulos de las tablas la alineaci贸n en x a la izquierda. Ahora noto que, a medida que se experimenta con dispositivos m谩s grandes, poner el subt铆tulo a la izquierda se ve mal.

Aunque hay maneras de trabajar alrededor, es el estilo de cada cual, pero aqu铆 se resolvi贸 mi duda, y quiz谩s t煤 hayas tenido la duda tambi茅n.

Por supuesto tambi茅n gracias a todos los compa帽eros que comparten sus conocimientos, pr谩cticas y aportes鈥 Muy 煤tiles鈥