Single Price Grid - SASS & Grid Layout

Community feedback

• 

  P

  Kent O'Sullivan•1,870

  @12KentosPosted over 2 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!

  1

  ---

  

  Pon Huang•210

  @ponhuangPosted over 2 years ago

  @12Kentos

  Hello Kent

  Thank you so much, I like that video :) This morning, I check others' code, and some of them use button instead of link.

  One used all:unsest property to reset, and I tried it works quite good.

  The other one just used display: inline-block and it works as the example as well.

  Quite interesting and confuse as well. XD Maybe should do one test to try every possibility to see how it looks differently.

  Keep on practicing. Thanks~~

  0
• 

  Stephen Ikuomola•570

  @stephenikuomolaPosted over 2 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 :)

  1

  ---

  

  Pon Huang•210

  @ponhuangPosted over 2 years ago

  @salutDami Hello, Stephen

  Yesterday, I just watched Kevin Powell's video and he talks about margin-inline: auto, and now can try and apply it :D

  Thank you🙏🏻 Have a nice day~

  0
• 

  Yasmine•700

  @Yasmine10Posted over 2 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!

  1

  ---

  

  Pon Huang•210

  @ponhuangPosted over 2 years ago

  @Yasmine10 Hi Yasmine👋🏻

  In the beginning, set the min() wasn't work, then found there is conflict when use min() in sass. And as you wrote Min() then it works!

  And I like the medium post, it is amazing good :D thank you 💛

  0

  

  Yasmine•700

  @Yasmine10Posted over 2 years ago

  @ponhuang Yeah maybe I should have explained that a little bit 😅 min() written in lower case doesn't work because sass has a min() function too, but because css isn't case sensitive and sass is, you can write Min() and it will take the css function instead of the sass one.

  1