Position problem ? Absolute? Relative ? I change window size and elements change place

Hello guys,

First post on the CSS section, nice to meet you all.

So, I have been trying to make a TicTacToe game with CSS and JS. This is what it looks like , so far :

I have one small issue though, I know you guys can help me with. I want to keep things tidy when I change the window size, because when I do it, things start falling apart ! Take a look :

I know this probably has something to do with the position property but I cant put my finger on it.
I have set the “board” position to absolute and the green margins on the side to relative.

Wondering if you guys could help me??

You might be looking at this more complicated than it needs to be.

I can’t say for sure since I can’t see your code, but it appears you have the main background set to white, and extra elements on the left and right set to green, or something similar.

Perhaps reverse this, so the background of the page is green, and put your grid inside an element with a white background. You could then make this element change width in proportion to the page, as long as its min-width stays the same as or more than the width of your grid.

Of course at this point you may have to put your instructions in an element with a white background, but just something to think about.

1 Like

@izzypt

with code would be better discussion, but breakpoints maybe for ipad and mobile,

@media screen only (max-width: 480px) {}

Hi @_max
Here’s the codepen of this project ( I havent finished it yet ) . Any advice are welcome !!!

@izzypt

love it!

i don’t really use codepen, mainly use chrome tools, but added a few div and classes,

now it shrinks good, but you eventually still have to add break points,

hope this helps.

https://codepen.io/5-max/pen/JjKdYQN

1 Like

@_max

You’re the man !!

Thank you :100: :100:

1 Like