Problem with responsive page help

i am trying to make a website where all the content is contained in these two windows. sometimes where will only be one window, and other times there will be two.

right now, i’m just trying to figure out the CSS to make it so that when i have 2 windows, they are positioned horizontally in the middle of the screen in landscape, and are stacked vertically in portrait. i am having a lot of trouble making the portrait mode behave correctly.


can anyone help?
(i would prefer a solution in which the same bit of code will work with both one and 2 windows.

in this part

@media (orientation: portrait) {
    margin: 2%;
    flex: 46%;

it looks like it should still add up to (2 + 46 + 2 = 50) half of the width per .vibe, so it’s still laying them out side by side. maybe you could have them be like flex: 96% or change the parent to flex-direction: column

1 Like