Skip to content
Submitted 9 months ago

Results summary component | How to properly scale? | Variables ?

Ynotlocin1•80
@Ynotlocin1
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello everyone! No major difficulty in recreating this page, but I have a recurring issue that I would like to solve. How do I properly adjust the size of the HTML? In the example, the mobile version was supposed to take up the entire page, and the desktop version was supposed to be centered. However, it seems like the size of my HTML file is limited. I think the solution is simple, but I prefer to ask!

Another concern, I'm a bit confused about the use of h1, h2, h3. Is it based on the importance of keywords on the page? Is it okay if they are out of order in the page chronology? (e.g., h1 > h4 > h2)

And one last question, when I wanted to change the color of the "reaction" block for example, I was looking for a way to take the variable used to color the text and just reduce the alpha of that variable for the background color. However, I can't figure it out. Any solutions? Thanks in advance!

Community feedback

  • Roraima Lugo González•510
    @roraima1986Posted 9 months ago

    Hello, you could use flexbox inside your .main to centralize

    main {
      display: flex;
      justify-content: center;
      align-items: center;
 }

    It has worked for me when I want the design to be completely centralized on the page.

    With your question about the headings from h1 to h6, if the order is important. They are used to define the titles and subtitles of a page. In addition, they are a powerful SEO (Search Engine Optimization) tool since, thanks to these HTML headers, we can provide hierarchy to the information and tell search engines what the content of our website is about.

    Follow these best practices and optimize the use of HTML header tags in your code:

    • Avoid skipping HTML header levels. That is, always start with <h1>, then use <h2> and so on.
    • Avoid using <h1> more than once on a page. This tag is used once to display the page title, followed by the other HTML headers, starting with <h2>.
    • You should also not use lower levels to reduce the font size. To do this, apply the CSS font-size property.
    Marked as helpful
    1
    Ynotlocin1•80
    @Ynotlocin1Posted 9 months ago

    @roraima1986 Thanks for your feedback! I solved the centering problem by adding 'display: flex', 'justify-content'... properties to the <body> tag within the media queries, and it's okay now! :) I wanted it to be centered for the desktop version, not for the mobile one.

    1
  • Dêvid Teófilo•240
    @devid8642Posted 9 months ago

    Firstly congratulations on the solution, I just have a small tip in relation to what has already been said:

    To center the card, in addition to using a flex display as already mentioned, consider also using: height: 100vh; to completely center;

    Marked as helpful
    0
  • Dêvid Teófilo•240
    @devid8642Posted 9 months ago

    Hello, I'm here again. I was also wondering if there was any way to use color variables in the way you described. Fortunately I found this css resource: https://www.w3.org/TR/css-color-5/#relative-colors. I believe it serves our case well.

    Here is an interesting explanation of this new syntax: https://developer.chrome.com/blog/css-relative-color-syntax/.

    However, as this is a new feature, it is not yet supported by all browsers (currently when I write this comment, the most recent version of Firefox does not support this feature, for example).

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord