Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Section With Dropdown Navigation

@MalexLucero

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are your opinions on adding margin to elements of a component. For example, lets say you have a card with an image, title (h1...etc), text, and button in a column. '''HTML

<article> <img /> <h1>Title</h1> <p>Text</p> <button>Call to Action</button> </article> '''

Would it be a good idea to remove the margin from the h1and paragraph, wrap the elements in a div, and set the margin on the div? '''CSS .card-title h1 { margin: 0; } .card-title{ margin: 1.5rem 0 } ''' '''HTML

<div class="card-title"> <h1>Title</h1> </div> '''

Community feedback

Elaine 11,400

@elaineleung

Posted

Good question, Manuel, I normally use a container if there are several elements that look like they are grouped together, like what you mentioned, and I normally use a padding for the container so that when the screen is small and the container is touching the edge of the screen, the text contents won't be touching the sides. For the margins, I already have a reset on them usually of margin: 0, so when I'm spacing them out, I would from the top element and see how much space there is to the element below, and then I'd just use margin-bottom to space it out. Or, if the spacing looks more of less the same, I'd just use the children selector or a gap property if I'm using flex/grid.

By the way the site looks great! I think the only suggestion I have just from quickly playing around with it is, you can try making the cursor a pointer on the dropdown nav titles since the title is clickable. Great job!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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