How would you start this tricky section?
Hey guys been asking for a lot of help lately 😅 I am not as good at css as I thought haha
I have the following hero (see images for desktop and phone mockups).
I don't want a solution, I just want to know what's the best way to approach this to make it responsive / skeleton snippet.
I'm able to do either the mobile OR desktop versions, but I'm not able to get them to transition cleanly.
Another issue I'm having is that the "Come join our award winning..." is set in the CMS, so the text could be pretty much any length. If there is too much text, my current implementation ends up having it overlap the CTA button. So I'm thinking the best approach to keep everything responsive might just be to put it in a massive grid but not sure...
66 Replies
I'm thinking maybe I can have the main image and the hero content in a 2 column grid (which I have currently), and then have the 3 other elements (2 image box, green quote, and how it works link) all in a flex container and then have it be underneath that section.
But typing that out, I still think it would overlap the hero content if I position absolute it
Grid all the way down
Grid for overlaying content is 🔥
So to reiterate, put that whole section in a grid (using something like grid-template-areas)?
How would the mobile look if I use that approach then? Should I have 2 rows and then just position: absolute the white box?
Or should I do something like a 5 column grid, have the image
1 / span 2, the white box 3, and the green quote 4 / span 2?na I'd use grid to layer it too
Word I think I did that in one of my first iterations of it and it worked
yea something like that, also could use areas.
ty b1! I'll make a codepen and see how I do and come back here if I have any questions
I have something like this right now:
I don't think I set this up correctly though -- how do I get them to overlap nicely?
I know you can explicitly set their rows / columns to make them overlap but if I do that here they'll overlap on the full height of the container no?
Oh if you are going to use grid-area* you will need to use named lines probably
not template-areas thats mb
I don't mind using regular columns / rows declaration if that gets the job done that's what I usually use anyway haha
I guess my confusion is like how many columns / rows should I have?
cause you can use [area-start] 1fr [another] 1fr [area-end]; or what not
yea that might be less overhead, I might give this a try too. My head is just in so much pain stupid sinus infection...
xD
oof my lines are a bit off but yea
Get well soon dude! I just had bronchitis and I'm still suffering the cough like 4 weeks later 😂
I was thinking about doing something like that but I thought that would be bad practice lol
oooooooof no fun bronchitis is rough.
https://codepen.io/b1mind/pen/YzbqpMV?editors=0100
meh I'd probably refactor this a bit
*first draft while head wont work 🤣
my head keeps telling me to nest more grids
yea idk I don't think I like this
Updated the pen but still kinda 🤔
ty! I'll take a look a bit later and yea it's really hard... I have probably spent like 4 hours on it ngl and have re-written it a bunch
Yea I mean it works just needs some TLC 🤣
having dynamic content in the mix def creates a whole issue in it self
yea that's why I was wondering if grid is the way because I was overlappinig before with
position and that was creating problemsmy issue with position for overlapping like this is its so hard to get it to repsect your layout lines xD
#depends as always right haha
could be you just do flat grid too and use transform >.>;;
little transform and place-self's 😂
if you're saying what I think you're saying I think i've tried that
i think i just need to take a step back, review what you did and try again lol
i think the html part is probably trickier than the css tbh
or maybe im just overthinking it...
Yea I feel like I'm overthinking it atm too
fun task 🧠
lol once i get some grub in me maybe ill see if i can use what u have as inspo and come up w something
This is where pixel perfect can F right off.
agreed thats why i said i might just say f it and not do it perfectly with teh design
would be way easier to just like add display flex for the bottom pieces (quote, box), let it stack, and be done w it
Yea idk how well that would work either though xD
I swear I'm missing the obvious easy path... I think nesting grids/flex children might be it though.
Big Q is where does the header go for mobile (i assumed below) 😂
If its ontop that changes what you can do for sure.
kinda really cursed https://codepen.io/b1mind/pen/VwOapKq?editors=0100 (need Ragnar to come in a school us with some grid areas short hand)
need a happy medium between the two
https://codepen.io/b1mind/pen/YzbqpMV update I to something I can live with lol. I still might* see if maybe with shorthand you could name the areas.
I'll have to check this tomorrow, I got a bit too distracted 😂
no worries I had it up in my browser still and wanted to play with it 😄 (also its not exact I'll leave that up to you :p based on image size but I didn't get the text or paddings exact)
Y’all missed step 1 of how to start working on this… Grab a nice strong beverage first 😎
😂might have to try that over the weekend....
@Rägnar baited
Vince nerd sniped me and well I wanna know if I could short hand this for area names.
lol time to look into this now that im on my lunch for a min
no beverage in hand yet tho...
there's gotta be an easier way to do this SURELY
rather than having a random amount of rows / columns
maybe we get Cubiq in here too 🤔
Andrew made me feel better when I woke up with that msg.
Dude same hahah
I posted this with the prefix "Man I'm not as good at css as I thought" and it's lowkey kind of liberating seeing you struggle with it no offense 😂
I thought i was just behind the curve haha
no offense taken
you nerd sniped me cause I love these types of problems and wish more design/developers took risks like this
also you mean the nav? it's on top
na I mean the section header the h1/p/link.btn
lmao yea I thought this would be a good opportunity to learn
o i c
1 sec
here's the full mobile mockup, so below:
ah yea so I did it in the right place*
This is another reason why I was saying earlier too that I feel like the html is tricky as well. Because if I put the white box with the images in the "Come join our award..." container I can have that look good easily for mobile (negative margins and give the "Come join..." text padding-top).
But then that structure changes for desktop
I mean that is where Grid is 🔥
ye i gotta look at urs in depth here
it looks really good
only thing is that lorem text in the green section should be something like a
margin-top: auto per the design
that would leave a lot of whitespace tho so ideally it would probably be better to maybe make it flex on mobile?yea I didn't go all in was mostly worried about layout/flow
You can use align-items: end; too
I did play around with how it spaced on mobile
hmm wouldnt that leave a white area? because align-items fits the content right or no
do you have a markup you could share in a codepen?
I can't be arsed to make one myself xD
Lol b1 has a working prototype if you wanna use that
I'm having trouble with the markup myself haha
i'm gonna port b1's over to local, i lowkey do not like codepen for debugging, i use the devtools too much and its kind of a pain
dood drives me nuts how it removes the grid highlight
I guess I never realized it did that 🤔
i didn't either lol i just dont like it cause the dom is all polluted so its kinda hard to move around
it's because it replaces the iframe
ooo
wait a sec i might have a crazy idea
ctrl+shift+c then click in
ohhh what i didnt know you could do that lol
updated the sizing a little and aligned end for mobile tagline. *(would really be nicest if the size was based on the content though...)
Could use some inherit or subgrid too if you really needed to. (would let you line up content on the parent lines better)
How about something like this for desktop?
I think this should be mostly responsive, whether we decide to use grid to overlap or
transform on the badges container
Still envisioning something like flex *for mobile might work best here but I want to try it based off b1's approach too
I'll have to try this after work, lunch overmay I suggest...
https://codepen.io/ragnar_ock/pen/YzbqOmK?editors=1100
@b1mind because you've draged me here xD
Nice this is what I expected from you! ty
Now I have to digest this and learn shorthand template 😄
lol you did a proper object-fit where I cheated with grid 🤣 ❤️
basically I assign an area to each of the grid elements and then create one either with the
grid-area part of the template or with named rows and columns when there's overlap
the magic trick is that if you name a your rows row-start and row-end and your columns column-start and column-end is actually defines an area with the same name
that's how I placed the .tagline in desktop and the .badge in mobile
teah 'cause the image didn't cover everything in large mobile xD
it was too smallyea thats on me I still struggle getting object-fit to work sometimes >.>;;
I really really really need to learn named lines because that still makes my head spin
So is this:
Looking at
icon-start... is it saying that icon-start spans 2 rows, both 75px high? And for the columns, it spans just that 1fr area?best way to see it is always devtools
Firefox might show it better cause of how they overlay the names
one thing I did like over Chromium back when I used FF more.
click the show areas too for this
thx b1!
This is also how I select layout elements for highlight if the dom is massive click fest.
you can give them colors and stuff different than defaults too
click the select to select or highlight with the check
damn dude I use devtools every day and didn't know about all of this lol
Now you do! 🔥
I think I'm getting somewhere ...
Using what you guys have as some light inspo on how you set it up a bit
https://codepen.io/vince1444/pen/LYoGazO
I don't have it responsive yet (and didn't use name lines (yet) 🤭)
I could probably use grid for the
badges-container too to stop that div soup
Alright I think I've got something I'm decently happy with: https://codepen.io/vince1444/pen/LYoGazO
I need to make some small tweaks but yea, thank you everyone! I used the grid based approach for the desktop and then switched it to flex on mobileUsing grid areas or assigning line names makes it so much easier to adjust the grid in media queries too. As long as the children have been assigned their grid-area names you can just rewrite your main grid in the media query, usually to 1 column and then define the order you want for the stacking if it changes. Then you don't have to select every child and reassign their grid-cols/rows.
I'll have to see if i can rewrite this then ty!
In a similar way you can also use named lines!
Grid is so amazing but definitely can have a bit of a learning curve at first. Kpow has YouTube playlists specifically about grid which is a great starting point , as is this course from Wes Bos. It's a little outdated as grid has changed in thr last 6 years but it dies help to grasp some of the core concepts
https://youtube.com/playlist?list=PLu8EoSxDXHP5CIFvt9-ze3IngcdAc2xKG&si=Ttw5DSxQQhhBozF0
thanks! I (think I) know the basics of grid (except named lines argh!) I just don't use grid-template-areas enough so my implementation definitely needs work 😅
That's what I did in the codepen I posted (the one I forked from B1)