Header + Hero Layout Problem
Hello!
I've been spamming front-end mentor projects as I'm a self-taught coder and lately in the projects I've been having a difficult time with the layout of the header + hero section, specifically when the background image is included in both.
I will provide a screenshot of a design from one of the recent projects.
As you can see in the design, the background-image of the person in the go-kart is included in both the header and the 'hero' section (you can argue if it is a hero section or not).
You could think about putting the "IMMERSIVE EXPERIENCES THAT DELIVER" inside the header element, but I believe it doesn't belong there semantically.
I then tried on a similar project giving the hero section element a position of absolute, applying the background image to it and then playing around with the positioning to pull it up to the top of the screen and then adding a bunch of padding + magic numbering it to make the layout work. This however seemed to be super inefficient and quite fiddily to make work.
So on this project I tried a different approach. I asked Mr GPT for a different approach because I didnt like the previous one and it suggested I setup my markup like this
<div class="hero-shell"
<header>
</header>
<main>
<section>
</section>
</main>
</div>
I tried this, and I was able to make it work for the mobile design. However as soon as I attempted to make it responsive on larger viewports it started to get super complicated. I dont even know if this approach is good at all? As soon as I saw it, I was super skeptical about wrapping the entire header + main tag in a div when I dont want all the other sections (not listing in the fake html markup) inside the 'wrapper'.
So I suppose my question is, what is the 'best' practice when it comes to a layout like this. There must be a common approach as this design is quite common across websites.
Thanks for the help!!!
I've been spamming front-end mentor projects as I'm a self-taught coder and lately in the projects I've been having a difficult time with the layout of the header + hero section, specifically when the background image is included in both.
I will provide a screenshot of a design from one of the recent projects.
As you can see in the design, the background-image of the person in the go-kart is included in both the header and the 'hero' section (you can argue if it is a hero section or not).
You could think about putting the "IMMERSIVE EXPERIENCES THAT DELIVER" inside the header element, but I believe it doesn't belong there semantically.
I then tried on a similar project giving the hero section element a position of absolute, applying the background image to it and then playing around with the positioning to pull it up to the top of the screen and then adding a bunch of padding + magic numbering it to make the layout work. This however seemed to be super inefficient and quite fiddily to make work.
So on this project I tried a different approach. I asked Mr GPT for a different approach because I didnt like the previous one and it suggested I setup my markup like this
<div class="hero-shell"
<header>
</header>
<main>
<section>
</section>
</main>
</div>
I tried this, and I was able to make it work for the mobile design. However as soon as I attempted to make it responsive on larger viewports it started to get super complicated. I dont even know if this approach is good at all? As soon as I saw it, I was super skeptical about wrapping the entire header + main tag in a div when I dont want all the other sections (not listing in the fake html markup) inside the 'wrapper'.
So I suppose my question is, what is the 'best' practice when it comes to a layout like this. There must be a common approach as this design is quite common across websites.
Thanks for the help!!!
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
