@MayankMudgalSubmitted almost 4 years ago
This is my solution using CSS Flex and Grid. Please provide your valuable opinion and insight on the solution as this will improve my coding skills.
Nicolas
@fainsteinAll comments
- @fainsteinPosted almost 4 years ago
Hey Mayank!
I think it looks great. Well done!
I strongly recommend to use max-width in the testimonial-cards and de rating-bars. When you change size to tablet, they take full width of the page and the view is not the best. You can keep the same design on every platform this way.
Nice job. Keep going, keep coding and happy new year!
1 - @pgbasseySubmitted about 4 years ago
please if anyone can help in any way with regards the @media screen section it would be awesome. I have set the widths as required for the desktop and mobile screens but I'm not sure how to begin styling the elements to make them adjust accordingly to the screen size
@fainsteinPosted about 4 years agoHey paul, your page looks pretty good.
For Media Queries, as you wrote, you have: @media (condition) { //Style to apply }
For example: a max-width: 500px condition, will apply styles all values between 0 to 500px.
Take a deeper look to the backround, it has 2 images to incorporate! Also the avatars for the 3 bottom cards.
I really liked your job! Keep going.
Here's my solution to the challenge: https://www.frontendmentor.io/solutions/responsive-social-proof-section-html-css-WOzC16Ewa
Happy coding!
1 - @Rohit-081Submitted about 4 years ago@fainsteinPosted about 4 years ago
Hey! I really like your design.
Some comments to improve layout:
- Find a way to insert both background images
- Give de "star-cards" a border-radius like you did with the bottom cards.
- Center the text on mobile display.
I recommend you to have a research con CSS Media Queries, to stablish some responsive rules in your code.
I just completed this challenge here: https://www.frontendmentor.io/solutions/responsive-social-proof-section-html-css-WOzC16Ewa
Hope to recibe your feedback! Nice job
1
