Solved Header Resizing on Mobile Device

Hey, my page (www.apexmountainschool.com) resizes on mobile devices (iphone 6 in Safari and Chrome). It appears that as the Safari/Chrome toolbar disappears the header gets bigger to fill in the screen. Does anyone know if there is any way to fix the header size so that this doesn't happen?

Also, the header title and buttons take up the whole screen on the mobile device, the only way of changing the size is to adjust the size for all devices. The screen doesn't appear the same on and actual mobile device as it does on the Visual Builder for mobile devices.

I don't know if the two issues are related. Both problems happen on every page of the site. Any help would be greatly appreciated! Thanks!

 

I'm not sure I understand your response. Is there a difference between a fullwidth and a fullscreen slider? I just read through the article and it shows how to add a fullwidth slider, which is what I already have.

I want both the fullwidth slider (for the homepage) and the fullwidth header (for every other page), the problem is that both resize when you scroll on the mobile device. Also, the titles/buttons do not appear the way they do in the visual builder.

 

Perfect! That code worked with the resizing of the screen.

The stacking of the buttons also makes sense, I was just hoping there was a way I could edit the mobile screen separately to not have to crop a single background image and try to have it fit both screens perfectly without the title and buttons getting in the way. It seemed to look better without the buttons stacked.

Thank you for your help, if there is any other advice you can give me for the mobile screen I'd love to hear it, if not I'll get to cropping.

 

Many of the background images look good on a desktop but when you look on the mobile device the subject of the photo is cut out or is placed behind the title/buttons making them harder to read.

 

No worries, thanks anyway!