@bladupsy
Submitted
@HugoPadilla
@bladupsy
Submitted
@HugoPadilla
Posted
Hi @bladupsy!
Congratulations on completing this challenge. You really did a great job!
I'll share some advice for you:
Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me. Ver solución
Marked as helpful
@Harley755
Submitted
Good evening sir/madam, is there a shorter solution on the CSS side to properly meet the challenge? How can I correctly write the lines of code on the responsive side?
@HugoPadilla
Posted
Hi @Hatley755, you are doing a great job!
Here are some resources for writing better CSS.
The BEN methodology has helped me a lot to write more organized CSS. Learn more here
I also like to use SASS to write CSS. I like the feature of being able to create variables (although this is a feature that CSS also supports) and the way of nesting selectors among other things. Learn more here
I hope this is helpful. See my solution here for a reference! See solution
Marked as helpful
@That-1-Designer
Submitted
Every type of comments are appreciated.😁
@HugoPadilla
Posted
Hi @dev-k1, you are doing a great job!
I quite like the result. The css code looks pretty clean to me.
I share with you some suggestions:
Here is an article to learn more about the importance of semantic structuring. Read the article here
Marked as helpful
@IamAnkita-create
Submitted
@HugoPadilla
Posted
Hello! Your live preview is not available. Try to check that section.
Some suggestions for you:
Maybe the problem is because in your repository you uploaded all the files inside a folder. It may be more appropriate to upload everything inside your repository.
@niicodeer
Submitted
[English] Hi everybody! This is my solution for the QR code component challenge. I built it by my own and i feel it is a little progress for me. If there is any tip about how to no breake the desing when it is on very small resolutions, please let me know.
[Español] Hola! Esta es mi solución para el desafío de la tarjeta de código QR. Lo pude construir por mi cuenta sin fijarme en soluciones como referencias y para mi es un pequeño avance, aún falta mucho, lo sé. Si hay algún consejo sobre cómo no romper el diseño cuando se visualiza en resoluciones muy pequeñas ( o tal vez no lo hay), díganmelo!
Saludos!
@HugoPadilla
Posted
[English]Hi @niicodeer!
Nice work! I really like the result!
Personally, the smallest screen size I try to work with is width: 375px;
so I try to make the design look good from here on.
Responsive design concepts is an approach to make the page look good on any size device. You can do some more research on this topic and start practicing.
I leave you an article here: See article
[Español] Hola @niicodeer!
Buen trabajo! me gusta mucho el resultado!
En lo personal, el tamaño mas pequeño de pantalla con que intento trabajar es width: 375px;
así que trato que el diseño se vea bien de aquí en adelante.
Los conceptos de diseño responsivo es un enfoque para que la pagina se vea bien en cualquier tamaño de dispositivo. Puede investigar un poco mas sobre este tema y comenzar a practicar.
Te dejo un articulo por aquí: Ver articulo
@aayusranjan
Submitted
Hey there! Hope everyone doin well.
is there anything to do span text in same line?
@HugoPadilla
Posted
You are doing a good job!
To solve the problem with your text you could do the following:
stats__heading
and stats__rate
element in a div
tag and remove their position: relative
property.div
element you could use flexbox to create a column and your text that one below the other with the properties:
display: flex;
flex-direction: column;
width:100%
card__stats
you can add the justify-content: space-between;
property.he above can be a more organized solution.
The reason why the text does not expand completely is because it is using the position: relative
property that allows you to position it in the place that you want, but this property does not eliminate the element of the flow of the document. That is to say, in the background all the elements are one next to the other occupying a part of the available space in your card__stats
.
The property position: Absolute;
if you remove the element from the normal document flow but this is positioned in references to its parent but it is close that has the property position: relative
, that is, if in your card__stats
you add the property position: relative
and change in your stats__heading
and stats__rate
the property position: relative
by position:absolute
you solve the inconvenience and only remains to position them properly. But it is a not very elegant and simple solution.
and get some management on how I have done it. Leave me your comment or feedback if I have helped.
Marked as helpful
@pratikshan04
Submitted
@HugoPadilla
Posted
Good job.
@EliRen7
Submitted
@HugoPadilla
Posted
Hi, that's great work!
I like what I see.
I share with you some recommendations:
<main>
tag and put <body>
styles on it, this helps you with accessibility issues and improve your html structure.position: absolute;
all the time.You can check my solution and have a guide. I want to see
Happy coding :)
Marked as helpful
@jaedanpersaud12
Submitted
any feedback is welcome!
@HugoPadilla
Posted
Hola, ¡has hecho un gran trabajo!
Happy coding 🤗
@Anq92
Submitted
What is your way to organise CSS code and what would you recommend me to change in my style.css file? Do you think the way I used div tags and flexbox properties is optimal for this challenge or is there a better way to do it?
@HugoPadilla
Posted
Saludos! buen trabajo.
@CyberGeni
Submitted
I did this with tailwind too!
@HugoPadilla
Posted
good job, keep up the good work!
Marked as helpful
@karlkodes
Submitted
Any feedback please. Not sure if I did it properly? I did a lot of trial and error to get it as close as possible
@HugoPadilla
Posted
Great job!
If you need a reference you can see my solution here : https://www.frontendmentor.io/solutions/qr-code-component-using-html-and-csssass-GtiN3jg4T
Marked as helpful