Frontend Mentor - Order summary card solution

This is a solution to the Order summary card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
    • CSS Reset
    • border-radius vs. overflow: hidden
    • 100vh vs. 100% in html, body
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshots

Desktop

Mobile

Links

• Live Site URL: https://zerescas.github.io/order-summary-component/

My process

Built with

• Semantic HTML5 markup
• CSS:
  • CSS Reset
  • Custom properties
  • Flexbox
  • Grid

What I learned

CSS Reset

The original purpose to use "CSS Reset" is "reduce browser inconsistencies" seems is a little obsolete because a total domination of Google Chrome and death of all browser engines except of Blink(Chrome and Chromium based browsers), Webkit(Safari) and Quantum(Firefox with ~3% of the market share). Now the main purpose is to define global rules to get more logical and predictable behaviour of HTML elements.

border-radius vs. overflow: hidden

It turns out there's few ways to get a rounded container (all sides) and a rounded image (only top corners)

1. Setup an image and a container

.image {
  /* top-left-corner and top-right-corner only */
  border-radius: 2em 2em 0 0;
} 

.container {
  /* all sides */
  border-radius: 2em;
}

2. Setup a container only

.container {
  border-radius: 0 0 0 0;
  overflow: hidden;
}

100vh vs. 100% in html, body

A goal - stretch body to full height of a browser window.

1. Setup body only.

body {
  height: 100vh;
} 

This works fine only on desktop, but there's trouble on mobile (GUI of a browser overlaps a webpage)

2. Setup html and body

html,
body {
    height: 100%;
}

This still works on desktop and now on mobile we get real estate of a browser's viewport.

Useful resources

• CSS Reset from meyerweb
• Custom CSS Reset from Joshua Comeau

Author

• Twitter - https://twitter.com/zerescas
• Telegram - https://t.me/zerescas

Acknowledgments

Thanks to Aviral for the tip:

• Replace two div in footer content to ::before, ::after

Thanks to Lucas for the tip:

• Make selected-plan-container readable and more responsible below width of 350px.