Swetha-Mahes• 10
@Swetha-Mahes
Submitted
Martin Richter
@Karag2006
All comments
- Martin Richter• 160
@Karag2006
Posted
Also from me Gratulations to your first Project.
I totally agree with the Centering above. Even if you did not learn about grid yet, just use those 3 lines and learn how it works for more complex stuff at your own time.
I like that you used basicly only 4 html tags. and i tried to make the picture work without changing that or introducing any advanced things. And this should fix your picture:
- replace
img { height: 50vh; border-radius: 10px; }with:img { width: 100%; border-radius: 10px; } - remove the media query alltogether or if you want to use it change it so it does not make the component bigger then the screen is at that time.
for example you could safely change it to
@media screen and (min-width: 500px) .container { width: 400px; }The Challenge works perfectly fine without media query though.
Thats it, now the picture stays where it should and you still only use 4 elements on your solution.
0 - replace
- Ankit• 40
@fabledankit
Submitted
My site breaks below 375px width device. It doesn't break if
align-items: centeris removed in the first media query. But then it starts breaking above 375px up-to 600px. Would really appreciate some suggestions or critique.Martin Richter• 160@Karag2006
Posted
Hi, I actually dont see the issue your are mentioning, in your live site. Did you already fix it?
for me 375px width works fine
600 px as well assuming its supposed to look the way it does, but there are no issues with things breaking
and desktop works fine as well with the 2 sections beside eachother.
What i recently learned: if i see issues others dont then maybe check a different browser since some browsers can do weired things. If that does not help i would be willing to look into it if you can screenshot the issue and maybe describe the difference between what it does and what it should do.
0 - Danilo• 110
@daaaan12
Submitted
Este é um trecho de código HTML que inclui um resumo de um resultado de teste em um formato de cartão. O cartão contém um título, uma pontuação e uma seção de resumo com quatro componentes: reação, memória, verbal e visual. Cada componente possui um ícone, um título e uma pontuação. Na parte inferior do cartão, há um botão para continuar.
Em termos de estrutura, o código começa com a declaração do documento HTML e a seção head. A seção head contém o título do documento, a codificação de caracteres e a viewport. Além disso, a seção head inclui um link para um arquivo CSS que estiliza os elementos HTML.
A seção body inclui a estrutura do cartão com dois contêineres principais, card-resultado e card-sumario, que contêm os componentes do resultado e do resumo, respectivamente. Cada componente possui sua própria estrutura HTML e classes CSS, que definem o layout e os estilos para os elementos. Por fim, há um contêiner para o texto de atribuição.
This is a piece of HTML code that includes a summary of a test result in a card format. The card contains a title, a score, and a summary section with four components: reaction, memory, verbal, and visual. Each component has an icon, a title, and a score. At the bottom of the card, there is a button to continue.
In terms of the structure, the code starts with the HTML document declaration and the head section. The head section contains the title of the document, the character encoding, and the viewport. Additionally, the head section includes a link to a CSS file that styles the HTML elements.
The body section includes the card structure with two main containers, card-resultado and card-sumario, that hold the result and the summary components, respectively. Each component has its own HTML structure and CSS classes, which defines the layout and styles for the elements. Finally, there is a container for the attribution text.
Martin Richter• 160@Karag2006
Posted
Hi, First off: i like your Solution, espacially the additional hover on the Summary Categories.
Now for some small suggestions: You don't use Semantic HTML. Which is an easy thing to make the Solution a little better still:
- Include a <main> tag fro the majority of your html. For Example your card-container :
<main class="card-container"> ..... </main> - Also The provided attribution could be a footer instead of a div :
<footer class="attribution"> ..... </footer> - You are missing an h1 Headline. Idealy that would be the main Thing telling people what the site is about. In this case that would be
<h1 class="txt-resultado">Your Result</h1>
And the last thing: you do have a very slight visual effekt on the <button> for focus. This could be more obvious so people prefering the keyboard have a better visual clue as to what Element has currently the Focus. What i usually do for that is :
.btn-continue:hover, .btn-continue:focus { background: linear-gradient(to bottom, var(--color-light-royal-blue), var(--color-light-slate-blue)); }This just gives the button the same effect for hover and focus states.
I hope the Feedback is Helpful for you.
Marked as helpful
2 - Include a <main> tag fro the majority of your html. For Example your card-container :
