Making a responsive page with fixed width divs

1

My project is a word search game. I initially used CSS flex to position the elements which looks good until the viewport is smaller than the width of the fixed sized divs.

I’m not sure bootstrap would work as if my game tiles start dropping down to different rows it would be too difficult to play.

What I think would be best is if when the viewport is shrunk is the left bar stacks on top of the game div, and the “actionBar” stacks underneath it. As the game area width is set at 400px if the viewport is made smaller than this than I would like to resize the gameContainer and gameSquare fixed widths to a smaller size (in a similar fashion as media queries work for font size).

I’m not too sure how I could go about doing this. Anyone able to shed some light? http://codepen.io/doug20000/pen/KWQYaB

2

Still struggling with this, anyone able to help?

3

Here is a quick mockup: http://codepen.io/jenovs/pen/OpZvYV?editors=1100

1 Like
4

Instead of resizing or aligning the elements once the the screen gets small enough, how about replacing it with different elements altogether?

#gameContainer {
display: none;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding: 3px;
max-width: 400px;
height: 400px;
background: radial-gradient(rgb(150, 230, 190), rgb(81, 214, 148));
border-radius: 5px;
margin-top: 35px;
margin-left: auto;
margin-right: auto;
font-size: 1vw;
}

@media screen and (max-width: 900px){
#gameContainer{
width: 90vw;
font-size: 1.5vw;
}
#leftBar{
display: none!important;
}
#actionBar{
display: none!important;
}
}

You’re then free to fit a smaller version of the two side bars at the top and bottom of gameContainer which are set to display:none until the media rule kicks in.

1 Like
5

@jenovs I like the idea of changing the flex direction based on the viewport size, thanks!

@jx2bandito I never considered using separate elements but that could definitely help me.

I need a break from this for now, but I will revisit tomorrow. Thank you both!