Making a split screen stack on mobile?

Hi! I created a split screen banner using flexbox, and I'm having a hard time getting the elements to stack on mobile, rather than stay squished on one line.

This is the page I'm working on: https://www.augustbitters.com/home

Would greatly appreciate any assistance I can get as my computer is on the verge of being thrown out the window 🙂 

You can set up a media query for when you want them to stack, in this case I have it set to tablet:

@media screen and (max-width: 769px) {
     .Index {
          display: block!important;
     }
     .Index-page {
          width: 100%!important;
     }
}

Let me know if that works!

This works perfectly. YOU ROCK!!!

Awesome!

On 11/15/2019 at 12:46 PM, kdomonell said:

Hi! I created a split screen banner using flexbox, and I'm having a hard time getting the elements to stack on mobile, rather than stay squished on one line.

This is the page I'm working on: https://www.augustbitters.com/home

Would greatly appreciate any assistance I can get as my computer is on the verge of being thrown out the window 🙂 

Your site looks amazing! How did you get the split screen? I googled flex box and I'm still lost haha

5 hours ago, monicahardy said:

Your site looks amazing! How did you get the split screen? I googled flex box and I'm still lost haha

SS 7.0. Use Index page

SS 7.1. Use section background image + CSS Float