Submitted about 2 years ago

Solution using plain HTML and CSS

@prchristie

A solution to the Results summary component challenge

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.

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

P
markus•2,700
@markuslewin
Posted about 2 years 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
Sumanth Chandana•720
@sumanth-chandana
Posted about 2 years 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.

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