@able4services
Latest solutions
Latest comments
- @AdanMaidana
To fix the issue of stacked testimonials when the resolution is higher than 375px, consider switching the layout from mobile to desktop when the resolution is higher than or equal to, for example, 992px.
- P@socratesioaWhat are you most proud of, and what would you do differently next time?
I knew how to code it using flexbox but I wanted to try CSS Grid which turned out easier and cleaner.
What challenges did you encounter, and how did you overcome them?I had to brush up on my CSS Grid knowledge mainly grid areas. Great practice.
What specific areas of your project would you like help with?Is the responsiveness fine? I had a bit of a hard time deciding the break points.
@AdanMaidanaI would also recommend using the <img/> tag for SVG, the code is much more readable that way because otherwise you have the full SVG and since it is so long it can be confusing to maintain the code, especially in larger projects.
Marked as helpful - P@socratesioaWhat are you most proud of, and what would you do differently next time?
I knew how to code it using flexbox but I wanted to try CSS Grid which turned out easier and cleaner.
What challenges did you encounter, and how did you overcome them?I had to brush up on my CSS Grid knowledge mainly grid areas. Great practice.
What specific areas of your project would you like help with?Is the responsiveness fine? I had a bit of a hard time deciding the break points.
@AdanMaidanaI would recommend you to put the breakpoints with a little more space since the content looks very tight, for example 1024px and also consider using the max-inline-size property for the paragraph below the h1/h2, keep coding and improving!
Marked as helpful - P@angie-createWhat specific areas of your project would you like help with?
I’d love to know how to make the cards the same size across different devices, I used max-width and max-height but one of the cards has a different height.
Also, I usually design in px first and then convert the measurements to rem— is there a better practice for this?
I’d also love to know how you decide when to use Flexbox or Grid. In this case, I used Flexbox, but I could have used Grid too.
Any suggestions on how to improve my code are welcome!
@AdanMaidanaGood work, but you can try building your desktop layout with a grid without flexbox, because that gives you better control of the content, doing it with 3 columns and 4 rows is very easy to do the challenge.
- @nik-p12@AdanMaidana
Hi, here are some tips to improve your code.
- Avoid using absolute values. If the screen doesn't support those values, the layout starts to break. Try using max-weight/max-width to avoid that and also try relative measurements.
- The fonts aren't linked correctly. Try looking at the fonts.google page to see how to do it, as they explain how to add them to the head of your HTML.
Marked as helpful - @free-care@AdanMaidana
Add some margin between the list items so they don't look so close together, and a little line height in the paragraphs
