@LuisComZSubmitted over 1 year ago
I couldn't make the mobile design :/, but I accept sugestions for how a can make it.
MoggStephen
@MoggStephenAll comments
- @MoggStephenPosted over 1 year ago
Hello there!
You've matched the desktop design really well!
To get your mobile design to work you need to set up a media query at about 550px. Change the containers flex-direction to column and the width to 100%. Then you need to change your box and summary classes to width 100% too.
Initially if you want a responsive design you can set the containers width to 100% and max-width to the widths in the design. Then set your box and summary widths to 50%.
The method you used to center the container i think is fine for small components like this, however for any larger challenges you should not be using this. It can add a flicker effect to the page as it loads in larger projects.
You might also want to start using rem units instead of px. This video is passed around a lot with people who are new to choosing the right units for certain things, so I thought id link it! https://www.youtube.com/watch?v=N5wpD9Ov_To
Happy coding!
Marked as helpful0 - @JuanGelabertSubmitted over 1 year ago
Hi there! I have to say i struggled a lot with this one when i had to manage flex-items sizes. Please give me your feedback and if you know another preetier solution i will thank you a lot
@MoggStephenPosted over 1 year agoHi there!
Overall nice component.
To fix your sizing issue, you have a max-width of 95% set on your mobile version in .card. You should measure the size of the container in designs and set the max-width to that amount. If you set a width of 100% at the same time the container should be nice and responsive.
For this component there are desktop and mobile versions of the image that should be switched between at your breakpoints.
Your method of centering the component in your media query can be used for your mobile version too! For small components I think this method is fine, but typically centering elements is done with flex and justify-content-center/align-items-center especially in larger projects and challenges.
Other than that you matched the designs pretty well!
0 - @MellowTangeloSubmitted over 1 year ago
Hi all,
this is my second challenge on Frontend Mentor. I would like to hear your opinion on my solution.
I am interested in these topics in particular: 1.) Is my HTML ok, semantically? 2.) Is my CSS file structured correctly, and should it be divided in multiple CSS files instead? If yes, what's the common approach when dividing CSS files into smaller ones? 3.) Are there any other breakpoints that you can see on my web page?
Thanks in advance! :)
@MoggStephenPosted over 1 year agoHi there!
This is a great fluid responsive component.
To improve on your html semantically. You can use the section element to separate the result and the summary sections.
For a small component like this one css file should be fine! If you want to start separating css files you should look into using sass and sass partials! It can be easily setup within you projects with a live sass compiler.
Also class naming should be done using '-' and not '_'. This is called hyphen delimited string and is the standard convention for class naming in html and css.
Other than that its a great second solution!
Marked as helpful0 - @ornel77Submitted over 1 year ago
I had a hard time with the javascript because I didn't the right elements for the ratings (list of links instead of using input radio). But it's good now!
Thanks your feadback :)
@MoggStephenPosted over 1 year agoHello there,
Nice React solution!
I think you forgot to add the gradient from the designs using the hsl values and a linear-gradient.
The font-sizes are rather large too aha.
Both the rating and the thankyou should have the same size so swapping between them doesnt add a flickering effect.
Hope this helps!
0
