Hero layout creation

Hey, i'm practicing and improving on how to achieve certain hero section layouts that are typically used and I've got a question with a design

In the image, i know the two column layout is achieved by using

flexbox

flexbox

flexbox

flexbox or

grid

grid

grid

grid however i'm wondering the best practice to use to have the image positioned off of the screen whilst still keeping the consistent alignment etc. I'd appreciate anyone's help with this

Mannix•8/11/23, 6:00 AM

i made this for someone a while back https://codepen.io/MannixMD/pen/jOQQbEo maybe it will give an idea how to achive what you want

CodePenMannix

jOQQbEo

...

MMannix i made this for someone a while back https://codepen.io/MannixMD/pen/jOQQbEo may...

snxxwyyOP•8/11/23, 3:51 PM

ah thank you, i'll give that a look

snxxwyyOP•8/13/23, 4:35 PM

@mannix_ i'm not going to lie, i'm still kinda lost on how i would achieve it even after looking at your pen, would you mind explaining it please?

Mannix•8/13/23, 4:47 PM

basically you create 3 columns with grid and then you put the "off the screen" part in column 2 and 3 and the rest just in column 2.

snxxwyyOP•8/13/23, 5:02 PM

ohh i see now, thank you

snxxwyyOP•8/14/23, 1:33 AM

sorry to bother you with it again @mannix_, it's probably frustrating having to explain this

, i've been experimenting and i can't seem to get it to function the way i want, I've whipped up a quick responsive site with a grid layout for the hero section with two columnstwo columns, do you think you (or anyone else reading this) would be able to show me what you mean with the three column thing and positioning it off screen please? Here's a codepen of that if that helps, the grid properties are at the bottom in the desktop media query.

https://codepen.io/deerCabin/pen/BaGXLEY

CodePenR

off-screen layout

...

Ssnxxwyy sorry to bother you with it again @mannix_, it's probably frustrating having to ...

croganm•8/14/23, 3:15 AM

Let me know if this is what you were going for

croganm•8/14/23, 3:15 AM

https://codepen.io/croganm/pen/NWEQbJQ

croganm•8/14/23, 3:15 AM

If so I'll explain what I did

croganm•8/14/23, 3:15 AM

Elsewise I'll try to fix it

croganm•8/14/23, 3:16 AM

Tried to make it look like the photo

Ccroganm Let me know if this is what you were going for

snxxwyyOP•8/14/23, 3:17 AM

that was what i was going for yeah

, i've also been helped by someone else who's given a different solution so an explanation of your one would be great thanks

croganm•8/14/23, 3:18 AM

Yea no problem. I noticed the wrapper, so all I did was make the grid go 100vw (which is just the size of the screen). I knew it would overflow. I then put a overflow clip on the body. Kept it two columns

croganm•8/14/23, 3:18 AM

This way, it could start where the wrapper starts

croganm•8/14/23, 3:18 AM

But overflow it on the ends

croganm•8/14/23, 3:18 AM

What was the other way it was done?

Ccroganm Yea no problem. I noticed the wrapper, so all I did was make the grid go 100vw (...

snxxwyyOP•8/14/23, 3:22 AM

ohhh i see, thank you for explaining

, i was just playing around with it and it doesn't seem to let me adjust the grid-gapgrid-gap, would you mind if i ask about that?

croganm•8/14/23, 3:22 AM

Haha I put a max width on the text

croganm•8/14/23, 3:22 AM

Personal preference

Ccroganm What was the other way it was done?

snxxwyyOP•8/14/23, 3:23 AM

i'll send it over for you, https://codepen.io/mjusticeark/pen/NWEQbeZ

CodePenMatthew

off-screen layout

...

Ccroganm Haha I put a max width on the text

snxxwyyOP•8/14/23, 3:23 AM

ohhh haha

croganm•8/14/23, 3:23 AM

On smaller screen sizes the grid gap will change, just the max width was to prevent the lines from getting too long. Text should really only be 75 characters per line

croganm•8/14/23, 3:24 AM

You can just get rid of that last rule on the CSS sheet where I set it and it will allow you to fully customize it

croganm•8/14/23, 3:24 AM

Also that solution is very similar! They just did width 150%

croganm•8/14/23, 3:24 AM

Instead of 100vw

Ccroganm On smaller screen sizes the grid gap will change, just the max width was to prev...

snxxwyyOP•8/14/23, 3:24 AM

ah can't argue with that

, so adjusting the gap would basically just be changing the max width of the text?

croganm•8/14/23, 3:25 AM

Almost. Basically the gap is more than 80px most of the time, but the minimum gap will now be 80px

snxxwyyOP•8/14/23, 3:26 AM

ahhh gotcha gotcha

snxxwyyOP•8/14/23, 3:26 AM

thank you for your solution, i appreciate that, gives me a wider outlook to solutions for these things

croganm•8/14/23, 3:26 AM

Yea no problem! Glad to help even if it was a little late

snxxwyyOP•8/14/23, 3:29 AM

it wasn't too late man, any solution is a step towards learning more about css to me

snxxwyyOP•8/14/23, 3:37 AM

oh one thing i have noticed @croganm is that the alignment of the hero text and navbar is a little off? is that to do with it being pushed off screen?

Ssnxxwyy oh one thing i have noticed @croganm is that the alignment of the hero text and ...

croganm•8/14/23, 3:38 AM

I on purposely centered it to look like the picture. If you want it to be left aligned with the nav, just remove the place-items: center;place-items: center; from the section.herosection.hero

croganm•8/14/23, 3:38 AM

Didn't know how much like the photo you wanted it to look like

snxxwyyOP•8/14/23, 3:39 AM

ohh that's entirely my bad, i didn't even notice that line

snxxwyyOP•8/14/23, 3:39 AM

appreciate the reply

Ssnxxwyy ohh that's entirely my bad, i didn't even notice that line 😅

croganm•8/14/23, 3:40 AM

No problem! Just changed it to align-items instead, probably more so what you're going for

snxxwyyOP•8/14/23, 3:41 AM

ah yeah that'll be the one!

snxxwyyOP•8/14/23, 3:41 AM

thank you!

Mannix•8/14/23, 6:16 AM

https://codepen.io/MannixMD/pen/RwqXpxG

CodePenMannix

off-screen layout

...

Mannix•8/14/23, 6:16 AM

no need to play with vw or overflows

MMannix https://codepen.io/MannixMD/pen/RwqXpxG

croganm•8/14/23, 11:45 AM

It doesn't stretch to the outside

croganm•8/14/23, 11:45 AM

Mannix•8/14/23, 11:47 AM

it stops at 1200px

MMannix it stops at 1200px

croganm•8/14/23, 12:33 PM

Ah, I wasn't sure if we wanted the image to continue stretching or not. I was under the assumption he did. Yours is how you should do it if you want to keep it within the container

Mannix•8/14/23, 12:34 PM

imo it needs to stop at some point on 4k screen it's gonna look weird tbh

croganm•8/14/23, 12:37 PM

That's fair. I always test on 4K at home but it's a bit tougher on mobile.

snxxwyyOP•8/14/23, 6:07 PM

Thanks for another solution @mannix_ , could I ask what margin-inline: auto;margin-inline: auto; does?

Mannix•8/14/23, 6:08 PM

it like setting margin-left:auto;margin-left:auto; and margin-right: auto;margin-right: auto;

MMannix it like setting `margin-left:auto;` and `margin-right: auto;`

snxxwyyOP•8/14/23, 6:39 PM

Ah is there any significant difference or can you put those two and have the same result? Like is it a shorthand for those two?