When I add max-width: 70vw; to the game board div outside of the media query it works. But when I add the same line inside the media query it does not produce the same result but the screen is wider than 667 px.
The way you have the CSS set up right now you’ve got both a min-width and max-width set to 70vw on the game-board div when the viewport width is greater than 666px. It seems to be working for me. Can you give more specifics about what you are trying to do and why you don’t think it is working?
I got it looking like a traditional tic tac toe board on mobile using devtools smartphone design. But when I rotate it to landscape mode it falls apart. I just want to keep it looking the same when rotated.
On 365 pixels of width I get this:
Anything between 365px and 666px seems to be distorted
Below 365 px I get this:
Is this the issue you are talking about?
Yes. Also I don’t know why there is a gap between the borders in portrait mobile mode for you. Doesn’t have that on mine.
I think you need to settle on whether you are going to use flex or grid to make the game board layout. Switching between the two just because the view port is wider doesn’t make sense or seem necessary.
If you stick with flex then my advice would be to wrap each row of three squares in a helper div so that you just have three direct children of the game-board div. This will make it much easier to handle with flex.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.