TIP-Calculator-App

👋 Hi Massoud , Your solution is Awesome , it works perfectly & looks nice as well. Well Don 🥳🥳🥳

However I think if you use

• max-width:860px (you can give any suitable fixed value ) instead of width:60% then your responsiveness will be better & you can have the media query at 768px because at 1024px mobile view is not looking good !
• in right-column section , you have some p tags with class p1,p2 , there instead of using position : relative to position elements , you can have a parent div with display:flex;justify-content:space-between like shown below: (this is a better way than using position )

<div class="flex justify-between">
            <p class="">
              Tip Amount
              <span class="">/ person</span>
            </p>
            <p
              id="tip-amount"
              class=""
            >
              ₹4.27
            </p>
          </div>

Other than that your solution is amazing & Please keep contributing fantastic solutions like this 👍

Thanks Abhik for your helpful feedback. I have now a better responsive page😊.

But for the second part, I'm not sure that it is realizable because I will have two columns of <p> if I add them in a <div> parent with <<display : flex>>.

I have the <<position : relative >> only for <span>s that are naturally <<inline-block>> . I know it's not the best solution but It works😅.

Massoud