Single Price Grid - SASS & Grid Layout

Community feedback

• 

  P

  Kent O'Sullivan•1,870

  @12Kentos

  Posted almost 3 years ago

  Hey @ponhuang,

  Nice job on the project! Normally I don't like when people make changes to the color scheme of the projects, but I think you did a good job. :)

  As for the question regarding buttons and links, I think it depends on the purpose you have in mind. For instance is the button going to take them to a different page? Or is it part of a form submitting some information?

  Depending on the situation, it is easier to use one over the other because of the inherit difference they both have. Personally I like to style a link as a button, as I have more practice with that so I find it easier. However if it is going to be in a form, I would definitely use a button rather than a link.

  Here's a nice two minute video I found explaining the differences between them, and when to use which one.

  Button vs Link

  Keep up the great work!

  11
• 

  Stephen Ikuomola•590

  @stephenikuomola

  Posted almost 3 years ago

  1. Hello Pon Huang!!!

  Increase the line-height of the description class to about 1.5 or you multiply your font-size by 1.5 to get an appropriate font size in px's.

  Just had a look at your code and I think the reason you are having issues with mobile version was because you made the container have a width of 50vw at a media query which has a max-width of 45rem. I personally think it's best you work with rem or px units in this situation. So you can do something like this: container{ width:85%; max-width:380px} or you could also do this container{ width= min(85%, 380px}

  Then finally on that same container class you can add a margin-inline:auto or margin:0 auto or margin-right:0 then margin-left:0.

  I think this solves your problem with the mobile version.

  Happy Coding Pon Huang :)

  11
• 

  Yasmine•710

  @Yasmine10

  Posted almost 3 years ago

  Hi Pon 👋

  To fix the mobile version you just have to change the following:

  .container {
   max-width: 63.5rem;   // what you have now
   width: Min(90%, 63.5rem);   // change it to this
  }
  

  The reason a button and a link work a little different is because their default styling is different.

  Also here are some resources to better understand the difference between a link and a button.

  • https://a11y-101.com/design/button-vs-link
  • https://medium.com/design-code-repository/a-vs-button-b859547cae4d#:~:text=In%20%2C%20there%20is,%3D%E2%80%9Dbutton%E2%80%9D%20for%20semantic.

  Hope this helps!

  12