All solutions

I have a few concerns while developing this app.

1. How to change color of svg icon? The color of cart icon in "Add to cart"-button should be white but mine is gray.
2. On hovering thumbnails, the border appears a weird way. A black border quickly appears before the real border color. This also happens on hovering user avatar icon. Any comments on this behavior?
3. I haven't really find out how to pass data from my imgSlide-context to the <Modal/> component. For now the current image in modal is default the first image in image array (dataImg.jsx). Any suggestions on how to implement this final feature of my app. Thank you for your time. Cheers,

Hi frontendmentor community!

I'd love to hear your feedback on my first React app. I have a couple of questions concerning my solution.

1. How change the color of a tip % button when it is selected/ clicked? In my solution, the custom input box is updated with the selected tip % value (and of course we can still customize our own tip %)

2. The "Number of People" input field is currently set to type="text". Is it better to set it to type="number" . If so, how to make sure that user cannot input negative numbers. I do set the attribute min="1" but it doesn't make any changes.

3. When reset button is clicked, the bill and number of people input fields are not cleared even though I have reset the state of each data field in a function called resetAllInputs().

Hi!

• Any tip/trick to position the card to in the middle of the viewport? I tried position: absolute, top and left set to 50% and transform: translateX(-50%, -50%) but it doesn't work.
• How do position the background pattern on the .page-container? Feel like a fool using negative values in background-position.
• When should I use % or vh/vw to set width and heigh of an <div>?

Thank you for reviewing my codes. Cheers!

Hello! I'm very appreciated you spending time taking a look at my solution and give me feedback on some issues that I am having.

1. I have a slightly issue with the site in desktop view. How can I position the buttons and the background-image of the <div class='testimonial--container'> which is the quote pattern. They are now moving whenever I make the browser bigger. I also took a look at the site with my Samsung A51 (360px x 625px), it looks pretty nice. However the site looks off on my Samsung tablet (especially on portrait view). The buttons shift way almost to the top of the image's container.

2. Is it a good practice to use different units on css codes. I use both rem and px.

I'm open to all kind of feedback so I can improve in the next challenges. Thank you!