Order Summary Card using Flexbox and CSS Grid

Community feedback

• 

  Maykol Vallejos•200

  @maykol-vallejosPosted over 1 year ago

  Hello, how are you? Regarding your question it is a very good practice to use a divs structure for a better ordering and understanding of code, maybe suddenly it would be good to understand the difference between section and divs, but both are valid according to the convenience of use. You can see some differences in the following link:

  https://www.educba.com/html-section-vs-div/

  Now I have two observations to make, the first one is that you try not to use "px" for accessibility issues between different browsers, which causes that in some browsers it does not resize or render or is not responsive for not having accessibility to it. Una buena practica para ello es utilizar la tecnica de tamaño de fuente 62.5%, puedes revisar el siguiente articulo para aprender sobre el y aplicarlo para un trabajo mas eficiente:

  https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/

  And the second observation is regarding the elements inside the div of type class="section3". It is not a good practice to put a button inside a "p" or "a" tag, if you want to use an "a" tag that redirects you would simply style that tag and not a button as such, for example (following your code in the section3):

  in your html you could replace all your elements with these two lines of simple code

  <a href="#" class="payment">Proceed to Payment</a> <a href="#" class="order">Cancel Order</a>

  and in your stylesheet change the names of the classes ".change:hover button" to .change:hover , and also change the name of your ".payment:hover button" to ".payment:hover".

  In the same way in your stylesheet, change the class name ".payment button" to ".payment" ...inside the class ".payment" add the following elements: width: 250px; text-align: center; (I don't usually use pixels but I do it according to the semantic of your code for this case)

  and finally in your stylesheet change the class name ".order button" to ".order".

  With this you will have a better structure of the html code.

  Very good programming logic, keep it up, good luck in your other coding, success!

  Marked as helpful

  0

  ---

  

  Mayra Lepró•30

  @mayraleproPosted over 1 year ago

  @maykol-vallejos thanks for your input ! I deleted the buttons and changed it with your recommendations; thanks for the links too, I'll read more about the 62.5% font trick.

  0