Skip to content
Submitted about 3 years ago

Responsive background using SCSS

ravenloue•40
@ravenloue
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I struggled the most with the background elements on this one. But once I figured it out, the rest was smooth.

Something I'm not certain about is how to fix the accessibility issues that the solutions page shows. The documentation provided when I visit the error is confusing to me. I've tried to fix it on other projects but just end up with more errors.

Community feedback

  • Davide•1,725
    @Da-vi-dePosted about 3 years ago

    Hi, it looks good, good result on this challenge! The root of the problem for what i see is the absence of semantic HTML, that's the reason you have those issues, i try to explain something.

    • The first issue: "Document should have one main landmark". That means you always need an element that represent the navigational region such as: header, main, nav, footer. In your code after <body> opening you have 2 <img> tags, starting right away like this it's not a good practice, you should open a <main></main> element after body and wrap all the code up to <footer> element, like so:
    <body>
    <main>
         
   all your code

</main>

     <footer>
      footer code
</footer>
</body>

    The main element contains the card which is the only thing in the page, so it's the main content; the footer though is not part of the main content because <footer></footer> has a specific meaning in a web page, typically contains information about the author of the section, copyright data or links to related documents. I guess by now you're starting to understand what a navigational region is.

    • The second issue repeated more times: "All page content should be contained by landmarks". It's similar to first issue but in my opinion is even more serious! Unfortunately your website can't be accessed by a screen reader because it expects to find semantic elements not only <div></div> elements which are used mostly for styling purpose! For example i saw the last part of the card is kinda messy in HTML, you wrapped all individual headings in divs whereas you could use an appropriate element like an <article></article> and group together what it needs to be together, like so:
    <article>
   <h3>80k</h3>
  <p>followers</p>
</article>

    I saw you used <h1><h1> heading, i used <h3></h3> instead because h1 can't be reused and heading have a discending order in the page.

    • I strongly recommend a pragmatic approach. Practicing and reading, baby steps, there's so much to know and learn! One of the best reference is mozilla docs.

    Hope it helps, keep coding :-)

    Marked as helpful
    1
    ravenloue•40
    @ravenlouePosted about 3 years ago

    @Da-vi-de

    Thank you for explaining the landmarks issue.

    I had originally grouped the lower elements together (like you suggested with the article tag), but I couldn't figure out how to reduce the spacing between the items. When I made them separate items on the grid, it was much easier to control the spacing. Do you have any other suggestions on how to handle this?

    1
    Davide•1,725
    @Da-vi-dePosted about 3 years ago

    @ravenloue Yeah sure, it's pretty basic, you will find this kind of text in many challenges!

    • I didn't look at your style yesterday i was focused only on HTML. Well, first thing first: no grid please! You don't need it, grid is better suited for multi dimensional layouts and it's hard to manage! Use flexbox instead, it's a pice of cake with it. I'll show you, try in your text editor:
    <div class="container__text">

  <article  class= "info-text "> 
       <h3 class= "info-number">80k</h3>
       <p class="info-name">followers</p>
   </article>

  the other 2 articles put the same classes as above
</div>

    then in CSS

    .container__text {
    you might need margin-top as well
    width: ...
    height: ...
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid ....      grey color for the line
}

.info-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    info-number and info-name class is just text, you style it as you need to.

    • As you can see you have a parent where you apply flexbox to confirm all your items inside are flex items, then you have each single item grouped, you apply flexbox in detail. That's it! It sould be ok, i didn't try it i just wrote everything here in the comment, If it's not ok let me know :-)
    Marked as helpful
    1
    ravenloue•40
    @ravenlouePosted about 3 years ago

    @Da-vi-de

    Thanks for the help with using flex on this! I managed to get the same look that I had with the grid with 2 or 3 lines fewer code.

    I had to use "flex-direction: row" instead of column though. Also figured out that I could adjust the margin for the <p> tag to make the articles the distance apart I was looking for!

    Thank you so much ^_^

    1

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