Hello,
I’m trying to position my #main-nav ID seen here https://codepen.io/CRhea/pen/oNzQgOa in a certain way but for some reason I cannot seem to change the top or bottom margin placement. I suspect it has something to do with the h1 style, but I have spent the last few hours trying to figure out what and getting nowhere. Any assistance would be appreciated, thank you.
You can use a negative margin-top instead to pull it up and/or remove however much of the bottom-margin and bottom-padding on the h1 as needed (to close the gap between the two elements).
If you want to see what is happening remove the height on #main-container and look at what happens to the height of the #welcome-section element as you increase the bottom margin on #main-nav.
But I think there are a few issues here as well.
Don’t set display: grid on the body with the test script in the HTML. Its behavior is odd. Move the test script to the settings (Settings > JS > add the test URL in one of the boxes). Or use a container element for the grid other than the body. Also, don’t use CSS Grid unless you have a good reason to. So far I’m not really seeing one but I realize the layout is maybe not complete.
Make sure you actually need to define grid rows, you rarely do.
Not sure what the point of the #main-container is? Why not just have the styles on the #welcome-section element?
Thanks for the response. My idea when making the page is to have a grid with three rows. One row for the main page, one row for contact, one row for sample projects. That’s why I was using the grids with defined rows, I thought that was the optimal way to approach this.
But I removed the grid attributes from my body and discovered it wasn’t necessary since I have a grid display applied to each of the containers, so thanks for that. I see the JS and test url settings but I haven’t learned JS yet so I don’t understand what I’m looking at there. I also removed the #main-containers and just applied the attributes to the #welcome-section, which did clear up some clutter as well.
Applying a negative value to the #main-nav using a margin-top attribute so that does work for now, but I still don’t quite understand why it doesn’t work with positive values using margin-bottom. But thanks for the feedback either way.
All the container elements are block-level elements (full width) so they already stack on top of each other (without using grid). Each container element can be given a height (instead of a row size) if needed, like if you need them each to be 100vh.
Grid rows are created implicitly, if you put three elements inside a grid it will automatically create three rows. For more complex layouts you sometimes need to explicitly create more rows than what would automatically be created for you, or sometimes you need to size the rows (to something other than the natural height from the content). But most times, you do not need to explicitly create the rows.
The margin is just making the container taller, the element has no space to move up into. The space between the headings should be created using margin/padding between the elements (bottom for the top element or top for the bottom element). I know I suggested using a negative margin but you really shouldn’t need it here. Adjusting the bottom/top margin and padding on the elements should be good enough (but if the negative margin is giving you what you want then I guess it’s fine).
I would suggest creating a container for both the heading and the subheadings. Position the headings by moving the container (centering it and/or using margin/padding). Create the vertical space between the headings using margin-bottom on the main heading (remove any padding or margin that isn’t needed).