Change Header Size on Mobile Only

Site URL: http://www.cyclebeatclub.com

I like the header size on the desktop version but the mobile version seems to add more padding than necessary and it is huge. Is there any code I can use to resize the header for mobile devices?

4 hours ago, Notacoder said:

Site URL: http://www.cyclebeatclub.com

I like the header size on the desktop version but the mobile version seems to add more padding than necessary and it is huge. Is there any code I can use to resize the header for mobile devices?

If you are okay with turning off parallax on mobile

@media only screen and (max-width: 600px) {
        section[data-section-id="60007e89083bda4cd210fd88"] {
          height: 100vh !important;
        }
        section[data-section-id="60007e89083bda4cd210fd88"] .section-background-canvas {
          visibility: hidden;
        }
        section[data-section-id="60007e89083bda4cd210fd88"] .section-background img {
          visibility: visible !important;
        }
}

If your screen shot is an after code image, it is still too much padding. I placed the Code in Designs -> Custom CSS but the padding below and above the logo is still too big and doesn't look like it changed at all.

FWIW, I already had code to remove the Announcement Bar close "X" in the Designs -> Custom CSS. Do I put your new code above the announcement bar code?

22 minutes ago, Notacoder said:

If your screen shot is an after code image, it is still too much padding. I placed the Code in Designs -> Custom CSS but the padding below and above the logo is still too big and doesn't look like it changed at all.

FWIW, I already had code to remove the Announcement Bar close "X" in the Designs -> Custom CSS. Do I put your new code above the announcement bar code?

You mean padding here in the top and bottom? So far it stretch 100$ viewport height, how short do you want it?

Actually that part is okay. I want to reduce the padding around the logo, see attachment.

8 hours ago, Notacoder said:

Actually that part is okay. I want to reduce the padding around the logo, see attachment.

Feel free to change the padding value, so far set it as 1vw

@media only screen and (max-width: 600px) {
        section[data-section-id="60007e89083bda4cd210fd88"] {
          	height: 100vh !important;
        }
        section[data-section-id="60007e89083bda4cd210fd88"] .section-background-canvas {
          	visibility: hidden;
        }
        section[data-section-id="60007e89083bda4cd210fd88"] .section-background img {
         	 visibility: visible !important;
        }
  		.header .header-announcement-bar-wrapper {
        	padding: 1vw;
    	}
}

Hi @bangank36 hope you're well.

I have a custom animated main header on my homepage. It works fine on desktop - but is cut off in mobile as per image...

How do I resize it for mobile? 

Thank you!

https://jeanine-thompson.squarespace.com/

password tuansqsp

It looks fine on my side, which one do you want to fix?