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.
landscape


portrait

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

in this part

@media (orientation: portrait) {
  .vibe{
    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

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.