Skip to content
Submitted over 1 year ago

Solution using plain HTML and CSS

prchristie•50
@prchristie
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

I wanted to make the site scroll horizontally once a certain minimum width was hit the result summary. Instead, it just resized. It did work when I set main to overflow: scroll, but this did not work well with the desktop design. I could have made the media query fix that but I figured there was a better way. Essentially, I want the component to eventually scroll offscreen so that it can still be used on extremely, tamagochi sized screens.

I also am unsure about the whole structure of my CSS. The file is quite large and hard to follow for the most part. I have isolated some shared things and some reusable css classes but at the same time I feel like it could be improved.

And finally, font-size... I wanted to set an entire div container with a few separate containers of text to the same font-size (notably the summary-item class). This had unexpected results, the font sizes were different. I figure this is because there is some averaging of font sizes being applied here as h1,h2,h3,p,etc all have a default font size in most browser and my css reset does not remove them. My research showed that I'm just gonna need to apply the font size directly to the container for the text but I'm wonder if there is a better way? It is extremely counterintuitive and honestly seems kinda useless in its current functionality so I must be missing something :)

Also, I didn't even see the data.json in the repo rip. E: Ive integrated the data.json file and it works by just rotating the colours. I don't think its the best way to do it but it gets the job done. I used a template but it kinda makes the code hard to read. If you were only looking at the HTML it would be hard to understand I think.

Community feedback

  • markus•2,250
    @markuslewinPosted over 1 year ago

    You might've tried to apply overflow to the <body> element. Overflow on the body has some special behaviour when the <html> element has overflow: visible. In that case, the body overflow is moved to the viewport.

    Mobile devices can zoom out if the viewport overflows, so that the user can see all of the content. I think it's this zoomed-out view you're seeing in the DevTools.

    Scrolling in two dimensions is often advised against, since there's a greater risk that the user misses parts of the page, but if you really want to force overflow on the body you can do so by also changing the overflow of the <html> element to something other than visible, e.g.

    html,
body {
  overflow-x: auto;
}

    I think the CSS looks great! There are lots of different values in the design, which'll inevitable translate to lots of rules. The unit of the font sizes should be changed to rem, though! That way, the user's font size settings are respected, which is important for accessibility.

    If you don't want the browser defaults for headings you need to override them in some way. It sounds like you want the headings to inherit the value from their parents, which is totally possible:

    h3 {
  font-size: inherit;
}
    Marked as helpful
    1
    prchristie•50
    @prchristiePosted over 1 year ago

    @markuslewin Thanks a lot for the feedback!

    As for the overflow, I was thinking mostly about when the screen gets extremely small. There is a certain point of auto scaling when the content stops being readable. Further, it seems that if I don't put a min width (meaning it won't scale horizontally I believe), then eventually the content overlaps and becomes unreadable as well. I imagine having a suitable min-width such that the content is always readable would be useful for people who are doing a multi-screen thing on their phone. Its better to have to scroll horizontally than to not be able to read the content at all :p.

    I still have a lot to learn about when to use which unit, so thanks for the rem tip! I'll start using rem for my font sizes now!

    1
    markus•2,250
    @markuslewinPosted over 1 year ago

    @prchristie Right, it definitely depends on how much you're ready to sacrifice the initial layout! 😄

    I do think you can get pretty far by making sure content don't overlap and wraps when it needs to (e.g. flex-wrap: wrap), and by reducing spacing.

    I haven't used an extremely small screen myself, so I don't know what the UX usually looks like. I can imagine such devices have zoom features, or some sort of text-only mode, so that the users can adjust the page on their own.

    I think that's the main drawback of forcing overflow on the body. Before doing that, users would visit the page and get the zoomed-in view with a horizontal scrollbar (because of <meta name="viewport" ... />), with the option to zoom out. By forcing overflow, you remove that option!

    0
  • Sumanth Chandana•720
    @sumanth-chandanaPosted over 1 year ago

    Hi prchristie!, congrats🎉 on completing the challenge. Better take care about following points.

    • Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings.
    • Use the alt (alternate text) attribute as mentioned in your Accessibility Report. alt attribute is used for Screen readers applications.
    • Why does alt attribute matter? Read here.
    • To avoid accessibility issues "All page content should be contained by landmarks" use code as :
     <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>

    (why does <main> matter? Read here )

    • For proper centering the container(whole card) vertically and horizontally you can also use the following simple block of code use code:
    body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}
    • When we open the GitHub repository link, you will find an About Section on the right side. There, also include a live preview link of your project. It is better for someone to check your live project while interacting with code.

    I hope you will find this Feedback Helpful.

    0
    prchristie•50
    @prchristiePosted over 1 year ago

    Its hard to tell if you actually took a look at anything or just copy pasted an answer to try and get some extra points :/

    0
    Sumanth Chandana•720
    @sumanth-chandanaPosted over 1 year ago

    @prchristie I just commented to let you know the validation rules if you don't.

    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