How can I make it responsive?
osvaldo
@osvaldoleivaAll comments
- @nodMarcosSubmitted over 4 years ago@osvaldoleivaPosted over 4 years ago
Hi Marcos, veo que tu nombre esta en espaniol yo soy de Chile asi que te comento en ingles y espaniol
I recommend you learn about CSS layout like Grid layout and flex layout those topics will answer all your questions https://www.frontendmentor.io/resources here a free sites to learn about those topics, I hope this will help you
Te recomiendo aprender sobre css layout como grid y flexbox esto te ayudaran de una forma mas rapida y sencilla el trasladar una pagina a movile y hacerla responsive son de las mejores formas hoy en dia yo he ocupado mdn que es la documentacion que da firefox movile network para aprender las diferentes tecnologias web y tambien he ocupado css-tricks.com muy buena pagiana tambien, en mi perfil esta la solucion por si quieres hechar un ojo antes de empezar aun que como todavia estoy empezando no es la mejor solucion
1 - @potopeterSubmitted over 4 years ago
How do I achieve the mobile responsive view? I tried some media query, but it didn't work.
@osvaldoleivaPosted over 4 years agoHi Peter I recommend you learn about CSS layout like Grid layout and flex layout those topics will answer all your questions https://www.frontendmentor.io/resources here a free sites to learn about those topics, I hope this will help you(sorry my bad english)
0 - @sarahc-devSubmitted over 4 years ago
Any suggestions on how this can be improved?
@osvaldoleivaPosted over 4 years ago// Si alguien que sepa español y pueda traducir esta reseña se lo agradeceria mucho Hi, I am new on this and my english is not to high but here go:
1 - you can use just one class for the cards example: <div class="card"> and make all the comun css and then use another class to make the border of the card
<div class="card border-orange"> <div class="card border-cyan"> etc, because this is a comun element (card) just with a single quirk (border)2 - media query width 600px is not enough for a responsive design i just use this @media (max-width: 1200px){ .down{ transform: translateY(0); } }
3 - you dont assign a width and heigth to card or div is for that the card are weird i use this on the card class in your case on the div (in my profile is the solution) width: 350px; height: 250px; Sorry my english I hope it was helped you now
Spanish: 1.- Usas una clase diferente para cada tarjeta(card) envez de utilizar una clase comun y añadir una clase especial para el borde de la tarjeta esto te ayudara a tener mas control del elemento, hacer cambios mas rapidos
2 y 3.- El media query que usas no es suficiente para un diseño adaptativo ya que si juegas con las dimesiones los elementos se distorcionan, esto tambien influye que las tarjetas (cards) no tienen ninguna dimencion establecida es por eso que se ven raras puedes ver mi solucion en mi perfil
1