Your Opinion
Hi guys
I was wondering how do make these two divs responsive on ipad/wide screens as they are moved using position relative
everyones opinion matters so drop it
62 Replies
If it was me I’d use grid for that layout, then it becomes responsive
Hmmmm... didn't know i could do that
But ill watch a YouTube video on it
yeah you can, it's pretty neat, i recommend becoming really familiar with grid, i'd probably do something like this
it is too complicted for me the content just doesnt overlap idk why? watched a video of kevin but he used 1/2 values and idk those, but i did come across a video in which a guy used flexbox and just gave -margin to overlap
you have to specify that you want the divs to overlap otherwise they don't, something like this
You can also use
grid-template-areas too
i am just too much of a beginner
ig its just so confusing
like i did play around and got the box on the image but it just wont go to the bottom
toooo hard for me
IT HAS BEEN OFFICIALLY 2 HOURS i was trynna figure this grid thing
🥱
going to sleep
you don't have 3 columns in your code, you have
1fr 2fr. the third column is essential for the overlap, you need to put grid-template-columns: 3fr 1fr 2fr;My mom will beat me if I turned the PC on now
Man what are you doing trying to learn coding then 🤣 enjoy your youth
Plenty of time to stress about this stuff in a few years or whenever
Take advantage of your youth 🙂 and chill
you see my grades aint looking so good so i have no option 😔
trying rn
i am tired BRUH it just doesnt overlap the image man
idk why
i am moving to the next section for now
You can't overlap cells with grid-template-areas unfortunately, but if you just want access to the grid-area name you can write your template with named lines
And you can also specify different names for columns vs rows if you need to then assign it to the relevant grid-column or grid-row property on the child .
I love area names so anything I have to change in a query is all changed on the parent. I don't have to revert all the children's fixed cells
grid-column: 2/6; grid-row: 1/3 on every childit should look something like this, here's an overlap example: https://codepen.io/deerCabin/pen/poXNgYa. Then you collapse it at smaller screen sizes.
i will say it now you guys are just too professional half of the things you guys say i just cant seem to understand 😔
i havent figured this out yet ill do that after i make my sites mobile version
What about it are you still not sure about?
I get lost, sometimes i cant find a youtube video about the problems i face, it sucks. The person who got me in this field is dissapointed in me. It has been almost 2 months and i dont even know the basics and the worst part is that you guys try your best to help me but i am the one not understanding so i just dont ask further questions bc the problem is me
i would share the code pen with you but the images aree not showing up and most of itis made in images
It takes a while to understand everything, you just have to keep at it. Work on small projects, and ask questions about anything you’re curious about even if it’s small, try to understand everything in depth as possible. There aren’t videos on everything that could go wrong unfortunately
is it just me or when i apply body width to 100vw a horizontal scroll bar appears like in this pic the black box
or is it my monitors problem?
When you give a div 100vw there’s always a bit of horizontal scrolling I believe, you’d have to use
overflow-x: hidden.gave it overflow-x: hidden; didnt work
Give the body it
But you don’t need to give the body a width of 100vw if that’s what you meant in your original message, that’s virtually what it already is
i made it in footer
its out of the body
You don’t need it for that either, the footer tag is the full width of its container, it doesn’t need to be 100vw
Feeling sorry for yourself isn't going to do anything. You can figure this out it just takes a while and a lot of practice & effort. My first couple years working with css produced a lot of crap code. Also you shouldn't be putting
width: 100vw on your container, and the likely reason why it shows the scrollbar is because you have a border around the container and / or you might not be using box-sizing: border-box;i gave the body the overflow-x:hidden; and it worked but dont understand it becasue they both are compltely different sections
overdlow worked on body
Take off
width: 100vw and you won't need overflow-x: hidden^^
Less is more in css
Each property you give an element / class / etc should be intentional
Take off
width: 100vw and see what happens
Does it still function the same?no it shrinks
Do you have a
display: flex on your body, or a parent element?yes
on the body
That that off
if i do my wholde page like gets messed up and not responsive i made the whole code according to that
That's because there's probably a lot of beginner 'hacks' in your code
faults you can say
You shouldn't use
display: flex on the body unless there's a real reason; why did you add it in the first place?
Yeagoing through the crappy era
of me
Everyone goes through it
idk i just get it done i dont know anything about SEO best practices etc
This is css not seo - did you go through the beginner courses from Kevin Powell?
Like Conquering Responsive Layouts (CRL)?
uhh No
I heard that's a good start, I would go through that
Learn the right way in the beginning and you can skip a lot of these beginner mistakes
sure
i will
even i still don't know things, the more you practice the more you understand
thats what someone said to me so i got straight to making projects after the basics of html and css
from the looks of the projects you're doing, they may be too complex for your skillset at the moment. I know front end mentor suggests getting feedback before moving to the next project to prevent those beginner mistakes as vince said, try building smaller things
newbie level?
yeah
from now on i move to newbie
that's what that level system means, you're supposed to make your way gradually from newbie to guru
this is the last project for me on this level but i gotta complete what i started so ill finish this one real quick and select a newbie one
i'd try give that a go and if it doesn't go to plan don't throw a load of random fixes in and call it a day, move to newbie then come back and you'll understand why you were having the problems you were and can fix them a more efficient way
ill give it a go if it does bother me a lil bit now
here's an idea of what you'd need to use for that project
thank you!
You’re welcome
🫂