Single Price Grid Component by using Grid

Community feedback

• 

  Hania B.•1,320

  @techantherePosted almost 3 years ago

  1. First thing first, use h1 and all elements under the <main> element, as it is a part of the main content.
  2. Headings are not about the size of the text but the context so instead of <h4> you should use <p> tag because the text is more likely a paragraph, and then you can change the font size of <p> relatively using rem units.
  3. the padding is not working for screen width greater than 376px because the code with media query is overriding the default code written for other sizes, you should maybe instead use max-width:376px or add mobile-first design
  4. First add the mobile design code in body and other tags and then change it in media queries into min-width:376px and change the flex or grid to make it columns then. Good lucks

  Marked as helpful

  0

  ---

  

  Suprefuner•470

  @SuprefunerPosted almost 3 years ago

  @techanthere Thanks for your reply!!!

  1. Well noted, thanks! Will do.

  2. I'm always confused about which content should be using the h tag. In this case, only "Monthly Subscription" and "$29" should be using "h" tag since this two element is the main content wanna show?

  3. The padding looks fine on my computer, using Edge. And yes, I was worked on the mobile-first then add media query to do the desktop version.

  0

  

  Hania B.•1,320

  @techantherePosted almost 3 years ago

  @Suprefuner Let's take it this way, if you have a webpage published and a search engine looks for a keyword, it will most likely look at the headings of the pages. Headings highlight the overall purpose of the content and if you put the heading tag on $29 it won't make sense about the content but yes if it was used as a meaningful highlight with some relevant/contextual content around, it could be considered as the heading.

  Marked as helpful

  0

  

  Suprefuner•470

  @SuprefunerPosted almost 3 years ago

  @techanthere Thanks so much! I'll keep that in mind.

  0