Need help with my layout responsiveness.
Hey, im making a website for a group that i have with some friends but im not able to get the layout to be responsive (NOT talking about on mobile)
The problem:
The problem is that when i resize the page on my browser (chrome) horizontally and/or vertically, it doesn't look very nice. Elements like images and text are overlapping and changing position when they should be static.
The original design that i was looking for was a clean and nice 2 column layout that would be good for both images and text at the right or at the left side. This design i based of of a design that i made in figma.
I tried to fix the issue several times but it doesn't work and i thought the best would be to join this discord server and get some help.
Thanks,
Kion.
55 Replies
please share at least something. Code, a figma design, screenshots... ideally, like described in #how-to-ask-good-questions, you should share a minimal live example in something like codepen or even just a live hosted version of your site
Please don't share this with anyone as the website is not uploaded yet as im still trying to get it to work.
Owned by BMR Space
(Other screenshots from figma as well.)
You should be aware that we use Answers Overflow, and our questions are indexed. From the posting guidelines:
This server uses Answer Overflow to index content on the web. By posting in this channel your messages will be indexed on the web to help others find answers.
ok just please don't share the code or design of this as it's owned by BMR Space
I'm saying the indexing is automatic, you may want to remove any copyrighted material
yeah it's copyrighted by me. BMR is owned by me
the way this works is that there's a bot that looks at all the posts and puts them up on here: https://www.answeroverflow.com/c/436251713830125568
Kevin Powell - Community Community - Answer Overflow
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
so there's no active sharing of your content, but it's available online and indexable by search engines
ok it's ok, but i don't allow the sharing of the code or design
thanks
It's best if you make a minimal demo of your issue then and put it in a code pen or something.
ok i just need some help with this
it's not very urgent but i would like to know how to fix it. Also im very new to this so there is a few things i'm familiar
Right but we have no clue what this is
🔮
I will say the easier you make it to get help the more help you will get
#how-to-ask-good-questions
yeah but what did i do wrong?
Also #learnGrid if you haven't
ahh ok lol
We can’t tell because you haven’t shared the code.
ive shared the code
here lol
It has everything. HTML & CSS.
That's more work for us
Make it less work
okay fair enough. But as b1 said, it’s best you minimise what you’re showing us so we can find the issue quicker
I.e. live code examples
Minimal examples are best
but i don't know whats the issue thats why im asking lol
oh hold on
give me a sec
here
the layout is kinda bad
like in full screen looks good but when minimized the page is very bad
It seems like you’re using a lot of position absolute which would be why
Again 🔮
Oh yea learn grid then flex don't use absolute positioning for layout
nop
It wouldn’t be written like that
ahh ok
position: absolute;
so should i use grid
yeah nop
hmm
idk lol
Either that or flexbox, it depends what layout you’re going for
2 columns like this
Well you could either use grid or flex for that, any other sort of special functionality you’re going for?
but i wanna make it flexible for both the image on the right like on the example above or this one where the image is on the left.
i used flex
Yeah I’d probably use flex then, you can make it a customisable component and add a reverse variant using flex direction
btw i love this trick that Keven told in one of his videos
yeah but i think that's what im using
im not sure
im not very nerdy when it comes to coding
another example of what's happening rn
this kind of stuff is almost impossible to diagnose without folks being able to see what's going on in their own browsers. That's why people have been asking for a minimal example or a hosted live site
full screen looks perfect, but not on other sizes like i showed
🔮
you're basically going to a mechanic and showing them pictures of a car that doesn't work
Look into flex wrap inside a media query maybe
dude im new to this, what do you mean with minimal example. im sorry im just not understanding can you guys please be patient with me...
a minimal example is the minimum amount of code and images you need to reproduce the problem
i have not media query currently only made for desktop currently
I mean... Exactly?
So use a media query and add flex wrap
It's a start 😶
ok will try that thanks 🙂
what do i put here? how should be the format? idk what size to put here
I'd recommend watching some tutorials on media queries
maybe follow Kevin's Conquering Responsive Layouts course
Kevin Powell
Conquering Responsive Layouts
Are you ready to take the challenge and finally figure out responsive layouts? Click the button below and jump in!
will try later