How do I do the layout for this?
So i have this design and I'm trying to implement it in vanilla CSS. i realised in mobile view i would make it a but on the main screen i realise that the image is on the right and the text is on the left . How would it be done? I've attached an image of the design. I'd prefer pseudocode so i try coding it myself.
73 Replies
If you do mobile approach first then do this
i mean, that's obvious but were talking about this
im not sure if grid layout with named regions would do the job.
justify-content: center; to center your element
since you switch the main axis into y axis
But if i do this my image would be in-between my text. but all my text are to be on the left.
so the justify-content will be the y axis now when you have the flex-direction: column;
they know that, they're asking about the positioning of the image
ah
google flex order
possibly..
yeah order
definitely lol
grid would be better approach for this as with this, you'd have to fit it between the children..
he listed flex in his initial comment, so I gave him a flex solution
but that would assume all the text is one div but doing mobile first its different divs
oh, right, however i don't think that's possible
i dont mind any
i see it as grid row-span tbh
then you'd be able to change the placement based on the grid template.
I would just flex-order everything as 1
and the image as 2
assuming you are starting from mobile first
yes but then how? how would you make it so that the left text aligns still as row?
if u use flex then be consistent
Flexbox Froggy
A game for learning CSS flexbox
have you guys seen this, it might help you figure out the different ways you can use flex
these are super easy tbh
Grid Garden
A game for learning CSS grid layout
and this one is for you cubiq, since I think you strongly prefer grid 🙂
i mean in that case i have no idea how id do this layout with flex.
https://codepen.io/thecubiq/pen/WNPqzpV
there's a simple demo with my grid approach.
This is a job for grid
@Hungry🐻 mind checking this out? is this how you wanted it to be?
+
the media query isnt working
really?
works on all my browsers, chrome, firefox, edge. what's your browser?
meaning my flex direction would be a row then
safari 😦
webkit ahhhhhhhhhh
gotta check the grid support on safari later, have to switch to my hackintosh.
Just tried it in on firefox though
show me on safari
and now resize it
just realised. i thin the ems you set is why i wasnt seeing it but yes thats what i want
i mean, like a bit smaller still, maybe just the 30rem is not enough
maybe try this
Mind going over the pseudocode approach you used ?
it shouldn't be that hard, i really tried to make it as simple as i could
if you don't understand how it works make sure to watch the grid series from kevin
Im yet to go through the code. Just wanted a pseudo explanaiton. Then i try it beforei compare what i did to yours.
I really want to be hands on
so well.. this part is just my goto template, it's just css reset and also makes it so that everything on body is centered and reactive.
then we have the main grid, the grid template columns set to 2 columns that are both taking the same fraction of space. i added simple padding and also placing all items to center.
and then the image. i don't go with mobile first design so by default ive set the image to span through 2 rows. also added border radius that makes the image rounded.
and then if the height is smaller than 30rem, i set the template columns to just one column. simple as that
in the structure also notify that i didn't have to even change the image order. it's always gonna be the second item
how did the text elemets fit all on the left? you didnt specify anything. was it the grid? Was it the image filling two rows?
that's default p css behavior.
I see. im just trying to understand the behavior of the elements. you specified two columns meaning all elements are going to ocupy the two columns row by row?
Kevin Powell
YouTube
Learn CSS Grid the easy way
It can be easy to get bogged down in how grid works, with a lot of new properties, values, and even units! So let's try and simplify things as much as possible, because to get started, you don't need to know everything about how Grid works.
🔗 Links
✅ The GitHub repo: https://github.com/kevin-powell/learn-grid-the-easy-way
✅ More videos on gr...
please take your time and lear this
also im terrible at explaining so..
Thank you everyone for helping me out. I currently have a challenge where my menu is not on top of my page for some reason even after using z-index. Trying to have a go before i post it asking for help.
It would be more helpful to post a codepen then screenshots of bits of your code. It all works together so the people helping could be missing an important piece , especially in this case with stacking context. Did you give the item with z-index a position: relative ?
Just tried and pasted . the whole code. my css styling isn't even working for some odd reason. only the nav styling is showing. https://codepen.io/oti-adjei/pen/YzBmjRv
Your class is named Hero and you’re selecting .hero
Just realised i copied the wrong css :). Its working now. Kindly check the pen now
Your nav links are there when pressing the hamburger menu, you can select them , you just can’t see them because the white color on the cream bg
the navlinks is suppose to have a z-index so it shouldn't even be showing whats beneath it like this page
That’s the behaviour I’m getting, they are on top of the content on mobile. You just can’t read the text because it’s white but it’s there
Hmmm so how come im getting something else
Could be the browser or device. The “responsive mode” on dev tools aren’t gonna translate to how it actually works on a phone device; it just demonstrates how it will work on the machine you’re working on, if the screen was that small. What browser are you using ?
Is it Firefox or safari?
Look up stacking context css + your browser
See if it differ
firefox but using responsive mode
In Firefox use the stacking context inspector to try and debug.
It’s an extension available
Another issue you have is your not making the navLinks display none or visibility hidden or setting your body’s overflow property so it’s creating side scrolling