Help with the top of this page I have put together
Codepen: https://codepen.io/TheHumanistX/full/MWPEGJa
So I have this page I put together just for practice. It does what I want over all, but I have that top area between the bottom of the header and the top of the hero/home section. You can use the navbar to hop around the page and if you click "Home", you see how I want it to look.
I had it using flex column at first for the overall layout of each section (header, home/hero, about, portfolio, contact, footer) and it looked how I wanted... Just like it does not but without that weird space between the header and home/hero section. I changed it to grid and got it looking back how I wanted EXCEPT that it now has that odd gap that I cannot figure out. The footer grid row fit right to the footer like I wanted but the header row seems to be expanded, which I guess is causing this? Would love any help figuring out how to get right of that gap so that, when the page loads, the hero/home is right up against the header. Also, would love any general thoughts on the layout, look, colors, format and any suggestions on making it look nicer and such, if you have any! Thanks! 😎
I had it using flex column at first for the overall layout of each section (header, home/hero, about, portfolio, contact, footer) and it looked how I wanted... Just like it does not but without that weird space between the header and home/hero section. I changed it to grid and got it looking back how I wanted EXCEPT that it now has that odd gap that I cannot figure out. The footer grid row fit right to the footer like I wanted but the header row seems to be expanded, which I guess is causing this? Would love any help figuring out how to get right of that gap so that, when the page loads, the hero/home is right up against the header. Also, would love any general thoughts on the layout, look, colors, format and any suggestions on making it look nicer and such, if you have any! Thanks! 😎
14 Replies
When you have issues with flex or grid it's worth going into the inspector and clicking the grid or flex button.
This can lead you to looking at the header element and seeing that
grid-area: header; is greyed out, this is because the header is position:fixed which causes it to not be affected by the grid. The solution is change fixed to sticky
Secondly you're coming into CSS grid with a 12 column mindset and it's creating a lot of cells to deal with and it loses the flexibility that CSS grid has
Thanks so much for the response! Ok, so when I change it to sticky, the header is now just filling in that gap and has much more height than I want. The original height of the header when set to fixed is what I want. Why would the footer maintain that height but header is now, when set to sticky, 2 - 3 times the height?
I had originally just had:
And it just had basically one row and cell per section. That's fine? I'm still working on getting comfortable with grid. I just had seen so many people set up actual grid systems with 12 x 12 or things similar to that so I kind of assumed that was a best practice?
I'll just fork it and make some changes 1 sec
Ok I appreciate your help. Also, one other question while I have you... if I wanted which ever link was 'active' to have an underline, I cannot do that with only HTML and CSS, correct? Would need a small JS snippet?
@thehumanist This is what I've done https://codepen.io/z-/pen/xxyXJPG/f0f0bf2cc7e5c9121ab3330212b07525?editors=0100
I have only made changes to the layout. I have commented out things that I've removed, and I've added everything new at the top so you can see the changes
Changes
- Removed grid from body and replaced it with flex column
- Removed all margins and paddings that you added to the sections and texts, and replaced it with simple padding to the top and bottom of sections
- Replaced
height:100vh with min-height:100svh meaning that if content needs more than the full viewport height it can expand. svh because things have been aligned to the centre and would look better on mobile. Except the hero which is 100svh subtract the header height, so the header + hero is full height.
- Removed fixed templates on the portfolio grid and replaced them with auto-fill making it responsive.
- Everything now respects the width of the screen down to 300px so it works on mobile. They also have a consistent margin around the edges rather than going up to the edges.
- Changed the about section to switch flex from row to column when it's too narrow
- Nav menu currently just disappears when it's too small, the idea is to change it for a mobile optimised navigation menu
- Removed viewport units on h2, increased 4vw to 6vw on h1
- All sections share the same flex properties.
- Moved contents of home into a new element to make it easier to be responsive
- Moved scroll-margin-top to apply to all sections and use the header height variable
- Removed various widths that were unnecessary
It looks like I did a lot but it didn't need much work to be doneThank you I really appreciate the help with this very much!
Did you see my question right above your last response?
My pleasure, happy to help 😊
Yeah! So I do need JS to do that, correct? Not possible with just HTML and CSS?
I'm fairly sure that it requires JS, I can't find anything that says it can be done with CSS, yet it seems like the kind of thing that should be possible
Yeah I know right? I figured somehow that could be done in HTML/CSS alone, but then after enough research decided it must not be possible with a little JS haha
Oh also, I had meant to ask, aside from the fixes... what are your thoughts on the layout/design of that site?
It seems decent but I'd not bother with having the sections try and be full height if they don't have a reason to have a bunch of empty space
Ok, so the nav to scroll to each section and each section filling that space is overkill? Better just as separate pages or still better as one page?
I'd keep it but have less focus on it. So no big black bar, it could share the same colour as the hero so it blend in, but when scrolling you aren't getting floating text over other text