MaximilianoDanielGarcia
@MaximilianoDanielGarciaAll comments
- @AlinaAlexandraVizireanuSubmitted about 1 year ago@MaximilianoDanielGarciaPosted about 1 year ago
Hi Alina, great job!
One little thing, I've noticed that when you submit an answer without making a selection this is moving on to the next question.
The rest looks excellent. Congrats!
1 - @paupalazzesiSubmitted about 1 year ago@MaximilianoDanielGarciaPosted about 1 year ago
Hi María Paula, good job!
In response to your question. You need to use media queries to change its design on different screen sizes. Here an example:
@media screen and (width <= 650px) { .container { display: flex; flex-direction: column; } }
The code above changes the properties of your
.container
class when the screen width is less or equal than 650px. Visit w3schools for more details about media queries.I hope these was helpful to you.
Marked as helpful0 - @camigamboaSubmitted about 1 year ago@MaximilianoDanielGarciaPosted about 1 year ago
Hi @camigamboa, great job!
There is an very useful browser extension called Perfect Pixel that allow you compare with the design image and thus see the exact dimensions. I use it and I recommend it to you.
I hope this suggestion is useful for future projects.
Marked as helpful0 - @AbrahamTegeneSubmitted about 1 year ago@MaximilianoDanielGarciaPosted about 1 year ago
Hi @AbrahamTegene, good job!
If you are wondering how to center it, let me show you 2 easy ways:
- Using Flex Box
body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; }
- Using CSS Grid
body { display: grid; place-items: center; min-height: 100vh; }
For the attribution part, you can do this:
.attribution { position: absolute; bottom: 25px; }
I hope these was helpful to you.
1 - @SpecticallSubmitted about 1 year ago
Audiophile w/ React, TypeScript, Tailwind, Framer Motion
#framer-motion#react#tailwind-css#typescript#redux-toolkit@MaximilianoDanielGarciaPosted about 1 year agoHi @Specticall, great job!
I've noticed that the main image is cut off and that's due you are using
object-cover
instead ofobject-contain
tailwind class. After you have replaced that class you will need to add abackground-color: #0f0f0f;
and az-index: -1;
onheader
tag.After you apply these suggestion it will better. The rest looks very good.
Marked as helpful0 - @Rohanbasnet12Submitted about 1 year ago@MaximilianoDanielGarciaPosted about 1 year ago
Hi Rohan, good job!
Here are some suggestions that might interest you:
-
I noticed that your
#profile-card
should be taller, try withmin-height: 612px;
. -
Swap the background colors of
#profile-card
and buttons. The card should be dark-grey and buttons grey. -
You should change the buttons' height, try with
height: 45px;
. -
Semantically, buttons should be anchor tag because they are redirectioning you to another sites.
After you apply these changes It will look better.
Marked as helpful0 -
- @imonBlazeSubmitted about 1 year ago@MaximilianoDanielGarciaPosted about 1 year ago
Hi @imonBlaze, good job!
Check this code to improve your background image and to center the card:
body { display: grid; place-items: center; min-height: 100vh; background-size: contain; background-color: hsl(225deg 100% 95%); background-position: center -25%; }
The
background-size: contain;
property resizes the background image to make sure the image is fully visible.After you apply these it will be look better.
0 - @EverezzeSubmitted about 1 year ago@MaximilianoDanielGarciaPosted about 1 year ago
Hi Lamar, great job!
If you're wondering how to center it, you can use either Flex Box or CSS Grid.
- Using Flex Box:
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
- Using CSS Grid:
body { display: grid; place-items: center; min-height: 100vh; }
And if you want to adjust your background image to the screen size just add
background-size: cover;
After you apply these suggestions it will look better.
1 - @EverezzeSubmitted about 1 year ago@MaximilianoDanielGarciaPosted about 1 year ago
Hi Lamar, great job!
If you're wondering how to center it, you can use this:
body { display: grid; place-items: center; min-height: 100vh; }
Then, remove the padding from
body
that isn't longer necessary.I hope these was helpful to you.
2 - @laplatacryptosSubmitted about 1 year ago@MaximilianoDanielGarciaPosted about 1 year ago
Hi @laplatacryptos, great job!
If you are wondering how to centered, you could use CSS Grid:
body { display: grid; place-items: center; min-height: 100vh; }
Then, you should remove the
margin-top: 225px;
from yoursection
tag.After you apply these It will look better. Regards!
0 - @cloudpc7Submitted about 1 year ago@MaximilianoDanielGarciaPosted about 1 year ago
Hi @cloudpc7, good job!
Just 2 little things:
- If you want to look it centered, you should add this:
body { justify-content: center; min-height: 100vh; }
- I think the margin top on image should be
margin-top: 1.5em;
If you want to know the exact measurements for the design, you have a figma file in the starter folder.
I hope these was helpful to you. Regards!
Marked as helpful0 - @ivan2600Submitted about 1 year ago@MaximilianoDanielGarciaPosted about 1 year ago
Hola Iván, buen trabajo!
Tengo unas pequeñas sugerencias para mejorar tu desarrollo.
- Para que se vea centrado sólo te falta agregar
min-height: 100vh;
a los estilos delbody
. - La fecha calculada debería estar alineada a la izquierda. Para hacerlo sólo debes reemplazar la propiedad
margin: 0 auto;
(esto hace que se centre) que tenés en.results p
y agregarle un espaciado para que no se pegue al contenedor, algo así:
.results p { padding-left: 60px; /* margin: 0 auto; quitar */ }
- Agrega
cursor: pointer;
al botón principal.
Otro detalle que noté es que no hay validaciones en los inputs. Podrías utilizar inputs de tipo
number
que te permiten restringir el rango de números válidos. Te dejo este link que contiene ejemplos muy útiles de cómo utilizarlo.Espero esto te sea de ayudar. Saludos!
Marked as helpful0 - Para que se vea centrado sólo te falta agregar
- @rame0033Submitted about 1 year ago@MaximilianoDanielGarciaPosted about 1 year ago
Hi @rame0033, great job!
It looks really nice. If you want to centered just add this:
body { display: grid; place-items: center; min-height: 100vh; }
Then, for the attribution you can do this:
footer { position: absolute; bottom: 25px; }
After you apply these It will look better.
Marked as helpful0 - @sokulski-sebastianSubmitted about 1 year ago@MaximilianoDanielGarciaPosted about 1 year ago
Hi Sebastian, great job!
If you want to improve your background image you should add this:
body { background-size: contain; background-position: center -25%; }
Also, I noticed that your
.container
class should have more height, maybeheight: 650px;
and remove itsmargin-top: 50px
;After you apply these it will looks better.
Marked as helpful1 - @terryyufeiSubmitted about 1 year ago@MaximilianoDanielGarciaPosted about 1 year ago
Hi Sophia, good job!
The thing with the image is your media query, you should set
@media screen and (max-width: 375px)
instead ofmin-width
. Then you can improve the background image usingbackground-size: contain;
andbackground-position: center -25%;
.Also, I noticed that the card isn't fully centered, you can do it adding this styles:
body { display: grid; place-items: center; min-height: 100vh; }
After you apply this code you need to remove the
.content-container
div, It is no longer necessary.1 - @siil3omarySubmitted about 1 year ago@MaximilianoDanielGarciaPosted about 1 year ago
Hi @siil3omary, great job!
I think you need to change the height to 100vh instead of 1440px. After you apply this It will looks centered.
Regards!
Marked as helpful0 - @ChristinaluluSubmitted about 1 year ago@MaximilianoDanielGarciaPosted about 1 year ago
Hi Christina, great job!
If you are wondering how to center text, you should just add
text-align: center
on your.inner-qr-conteiner
class. For the rest it looks really nice.Regards!
1 - @ShalomiAhavahSubmitted over 1 year ago@MaximilianoDanielGarciaPosted over 1 year ago
Hi Julia, good job!
It's work perfect and It looks similar to design but I notice that it too big. It's due you are using
vw
unit so the larger the screen resolution the larger the component looks.To have an approximation of the measurements I use a browser extension called Perfect Pixel that allow you to overlay and compare with the design image.
I hope it is useful for future projects. Happy new year!
0