Single Price Grid - SASS & Grid Layout

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. 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 :)

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!