Order Summary using flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Ikechukwu! 👋

  First, remove the remixicon.css. The site doesn't use it at all. I took a look at the Coverage tab in Chrome DevTools and discovered that remixicon.css is 100% not being used. So, remove it.

  Then, I suggest formatting the code to improve readability. It is much easier to read code that has a consistent format. You can use Prettier or even your code editor might be able to do it for you.

  Some more suggestions:

  • <span class="heading">Order Summary</span> Use heading tag.
  • The "Proceed to Payment" button should have type="button". It is not a submit button since there's nothing to be submitted. Usually, submit button is used when the button is inside the form element.
  • Use single class selectors for styling whenever possible. Currently, main.css has very high specificity.

  I hope this helps! Happy coding!

  Marked as helpful

  0

  ---

  

  Ikechukwu Kalu Amogu•240

  @Aikaykalu17Posted about 2 years ago

  @vanzasetia Thank you for your feedback In regard to "Single class selector" , you're saying i should style like this when possible ".profile-card" instead of ".main-container .main .profile-card" right?? Explain further what you mean by main.css has a high specificity Thank You

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @Aikaykalu17

  You are welcome!

  The example that you gave is what I meant about single-class selectors. From the main.css, I notice .main-container .main .details .select .audio-text .audio-sec. That only needs to be .audio-sec.

  High specificity stylesheet means that there are high-specificity selectors. Like the example that I give before. It makes the stylesheet hard to maintain especially on a larger project because it makes overriding styling harder.

  So, when you need to override the styling of the .audio-sec, you need to make sure that it has the same amount of specificity. Otherwise, the styling won't get applied. Also, since it is CSS, there won't be any error messages. It can be frustrating when things don't work as expected.

  Marked as helpful

  0