A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Aplicando media queries

29/31
Recursos

Aportes 101

Preguntas 43

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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;
}

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.

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.

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;
}

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:

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

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;
    }
}

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)" />```

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

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;
  }

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

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.

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.

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

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;
}

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:





Hice mi mayor esfuerzo y aqui mi resultado.

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;
  }

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

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!

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.

Dejo por aqu铆 mi proyecto:
bitcoin-site

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鈥

Definitivamente fascinante este mundo de la maquetaci贸n responsive. Se me despierta ahora el inter茅s por la parte del dise帽o鈥 Esta clase es la que termina de darle forma a este curso y nos enriquece como desarrolladores, especialmente en frontend鈥 Gracias Diego鈥!!!

utilice el gap y todo se acomoda bonito y como por arte de magia鈥

Buenas tardes, envio mi aporte, le coloque un poco de sombra a las celdas de la tabla.

Revisando en la documentaci贸n, el atributo media de link se utiliza para evitar el bloqueo del render durante la carga de los estilos.

Los estilos se aplican cuando la media query se cumple.

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鈥

#NeverStopLearning 馃殌 馃槂
<路 Mobile

<路 Desktop

Para los que en la secci贸n de planes, les salen dos scrolls se debe a lo siguiente:

.plans-container__slider {
    display: flex;
    height: 325px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
}

El scroll vertical es porque en la propiedad 鈥榟eigh鈥 es baja en el modo desktop del navegador, s贸lo basta darle un valor m谩s alto al del profesor Diego.
El scroll horizontal es por la propiedad 鈥榦verflow-x鈥 y se puede usar como valor 鈥榟idden/auto/unset鈥 para que no sea visible, seg煤n mi investigaci贸n es por un overflow en la p谩gina pero hice un ejemplo sencillo con un section vac铆o y al agregar dichas propiedades aparece el mismo scroll. No se espanten, que todo est谩 bien 馃槃

Es nuestra responsabilidad darle a los usuarios el mejor servicio. Por esta raz贸n, debemos hacer dise帽os responsive.

asi quedo el proyecto original

https://bata-bit.netlify.app/

Buenas. Lo primero que se debe hacer: es asignar un section a las dos cartas: como elemento padre: asignando un display: flex; a 茅ste, junto con los valores de height(316px), overflow-x: scroll; overscroll-behavior-x: contain; scroll-snap-type: x proximity; . Cabe recalcar que en mi caso, al darle un valor de display: flex; dicho elemento se me sali贸 del resto e intent茅 con distintos m茅todos para solucionarlo, y encontr茅 uno que es muy sencillo; el cual es asignarle a 茅ste elemento un width al elemento que contiene las cartas de inherit, y as铆 solucione el problema. (esto lo escribo con el fin, de que si alguien m谩s le pasa y no sabe c贸mo resolverlo 茅sta es una forma)

Yo use grid para hacerlo:

.product__cards-container{
    width: 915px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 25px auto;
}

Excellent class.

Segu铆 todo al pie de letra y no puedo hacer que las tablas de monedas y comisiones, est茅n una al lado de la otra鈥︷煒

Desde la primera clase estaba ansioso a que lleguemos a este tema =D

馃憣

Me agrado mucho el resultado

Por fin termin茅

Me ha encantado el curso! Proyecto finalizado!

Miren compa帽eros, podr铆a haber visto el video, pero prefer铆a hacer mi propia media query a desktop, ajustando tama帽os de fuentes e im谩genes, jugando un poco con flex y los tama帽os y creo que me qued贸 bastante bien.
Este es el resultado en desktop

Pueden ver mi web aqu铆:
https://arudope.github.io/batata_bit_concept/

Es increible el aprendizaje logrado hasta el momento鈥 Nunca pares de aprender!! 馃槂

Me encant贸 el cursoo!!

que genial este curso, una buena forma de llevar toda la teoria a la practica. gracias @degranda

Quiz谩s es una mala pr谩ctica pero us茅 overflow.x: auto;. Cuando agrando la pantalla no tengo scroll y cuando es chiquita s铆.

Hice otras modificaciones al archivo tablet.css para llegar a mas detalles del dise帽o 馃槂

header img {
  width: 200px;
  height: 60px;
  margin-top: 30px;
}
.header--tittle-container {
  margin-top: 20px;
}
.header--tittle-container h1 {
  font-size: 5.4rem;
  line-height: 4.6rem;
}
.header--tittle-container p {
  font-size: 1.8rem;
}
.main--exchange-container h2 {
  font-size: 3.4rem;
}
.main--exchange-container p {
  font-size: 1.8rem;
}
.main-currency-table {
  display: flex;
  gap: 30px;
  overflow-x: initial;
}
.product-detail-tittle h2 {
  font-size: 3.4rem;
}
.product-detail-tittle p {
  font-size: 1.8rem;
}
.product--card--tittle {
  font-size: 2.2rem;
  font-weight: bold;
}
.product--card--body {
  font-size: 1.6rem;
}
.icon-snack {
  height: 60px;
  width: 60px;
}
.product-detail--card .icon-card {
  height: 25px;
  width: 25px;
}
.product-cards--container {
  display: flex;
  flex-wrap: wrap;
  width: 930px;
  margin: 0 auto;
}
.bitcoin-img-container h2 {
  font-size: 5.4rem;
}
.planes--tittle h2 {
  font-size: 4.4rem;
}
.planes--tittle p {
  font-size: 1.8rem;
}

.planes-container--slider {
  justify-content: center;
  overflow-x: initial;
}

footer {
  height: 230px;
}

footer .left ul {
  font-size: 2rem;
}
.left li {
  margin: 20px 0;
}
.right img {
  height: 80px;
}```

Alguien sabe por que se me hace ese scroll y se me ve de esa forma?

Hola, una duda por que no su utiliza @media en los archivos CSS para definir en que tama帽o se aplique los estilos ?