Any tips on how to align properly the button with the box that has the quotes ? Currently, the button moves up or down depending on the size of the quotes. Also, the pattern divider does not appear correctly on mobile view.
You could try:
For the mobile version you have to use the mobile version of the divider svg. This can be done with and @media query.
You can if you want, check out my soultion for inspiration (it's made with react).
Also I think there is a abit too much margin between your divider and the button
Hope this helps.
Edit: Maybe also use a <q></q> tag instead of the <blockquote> tag
What is your solution to exactly matching the font size to the files provided by the "frontendmentor"? In the style guide, the font is 28px but it looks to me bigger than the one in the design images.
[Solved thanks to @Appz-dk solution] -- Also, I've noticed that the quotation marks in the design image are different than the default ones in the provided font. What is your best solution to change those quotation marks?
One other thing that is bothering me is the Layout shift. Since the text is coming from an API and it takes time, before that the height of the text is 0, and when it's getting loaded, it will shift the layout which results in a bad Lighthouse score. What solution do you propose for that?
I appreciate you taking the time and sharing your thoughts. Have a good one and see you soon 🍀
I've noticed that the quotation marks in the design image are different than the default ones in the provided font. What is your best solution to change those quotation marks?
You have to use a <q> </q> tag to get the right quotation marks (Check my solution for inspiration if you want to)
FeedBack is Always Appreciated :)
Not feedback really, but I am very curious as to why you're not using functional components ? I honestly thought class based components were not really used anymore.
