Frontend Mentor - Single price grid component solution

This is a solution to the Single price grid component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

• View the optimal layout for the component depending on their device's screen size
• See a hover state on desktop for the Sign Up call-to-action

Screenshot

Desktop

Button Effect

Mobil

Links

• Solution URL
• Live Site URL

My process

Built with

• Semantic HTML5 markup
• node-sass install
• SCSS custom properties
• CSS Grid
• Desktop-first workflow

What I learned

1.) set overflow: hidden to the container, then it will show the border-radius properly.

.container {
  overflow: hidden;
}

2.) When I set grid columns / rows to 50%, and it has text overflow issue. (the content didn't stay inside the padding) Change the value to 1fr and it fixed this problem.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

However, in the mobile size, I swap the rows to auto, incase the grid overflow the viewport.

.container {
  grid-template-rows: repeat(3, auto);
}

3.) Use all: unset to make the button works properly in desktop and mobile version. Also we need to give text-align property as well.

.btn {
  all: unset;
  text-align: center;
}

Author

Pon Huang

• Instagram - Pon Huang
• Art Blog - une felt

Acknowledgments