Skip to content
Submitted about 3 years ago

CSS, HTML

Bao Nguyen•100
@quocbao19982009
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with alternating feature blocks
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

I have some questions regarding the basics of CSS:

  1. I have <h1> and <p> inside a <div> with class name of "something". How do I access both of these elements at the same time in CSS? Usually is h1, p {...} but now how to do it with the class?
  2. In the footer (location Icon), I want to make the Icon to have a separate space but still next to the text. I try to use Flex but it stretches the Icon. How should I handler this problem?
  3. Is there any Conventions that I should use in my CSS and HTML that I should know for better coding? Thank you! And have a nice day!

Community feedback

  • Malesela Kgobe•555
    @M-KgobePosted about 3 years ago

    If I understand you correctly 1 this is how they are

    <div class="something">
       <h1></h1>
       <p></p>
</div>

    to access them both at the same time you would just .something h1, .something p{...}

    2 I used a table element for that section if I remember correctly, cause I had the same issue and the table seemed to be the best solution for me. Before that I had an idea of using 2 divs's, one for icons and the other for locations, then flex them next to each other, and probably set a max-height.

    You shouldn't have two footer's in yoour HTML document, and the font awesome icon should be invoked in a <i></i> tag, not the <a> tag. you can place them in the middle of the anchor tag.

    ooh have a look at your report

    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