Mobile site ignoring a line of code? Header cut off

[JFranck]

My site, marvellens.ca, looks fine on a desktop or iPad but when I view it on my Galaxy S7 Edge phone (or in the mobie site view option in the Weebly editor) the top and bottom of my header image gets cut off.

Here is what I have tried with no avail:

-resizing the image

-copying the site and reverting to original birdseye template without CSS customizations

I used Chrome to inspect elements of the site and I noticed that when I unchecked the box that dictates the header image to be 800 pixels high the image appeared to be cut off just like on my phone. Could it be that the line of CSS code that dictates the height of the image to be 800 pixels is being ignored somehow?

[kriskrost · Accepted solution]

Hi JFranck

Look for the area that says .banner-wrap .container in your CSS file, or you can add this line of code directly to the CSS file. If you don't want to make your theme custom, you can wrap this code in <style></style> tags and place it under "Pages" > click on the page on the left > SEO Settings > Header code. Or if you want the code to show on the whole site, place it under "Settings" > "SEO" > Header Code. You won't see the changes in the editor, but when you publish live and check on your phone, it should look better. 

@media screen and (max-width: 992px) {
 .banner-wrap .container {
          padding-top: 190px !important;
 }
}

[JFranck]

  .container {
    padding: 80px 40px;
	padding-top: 190px !important;
  }

I inserted the code you provided (shown above in bold) into the the existing code (under the .banner-wrap category) and it worked. Thanks so much!