TIP-Calculator-App

Community feedback

• 

  Abhik•4,840

  @abhik-bPosted almost 3 years ago

  👋 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 👍

  Marked as helpful

  0
• 

  Massoud•170

  @Massoud5Posted almost 3 years ago

  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

  0