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?

Looking for help with similar problem! 

Seems like my header is covering my background image in the section below it for mobile version only. I feel like I've tried everything. 

http://www.extramilepediatrics.com

On 6/10/2023 at 7:18 AM, traylorbl said:

Looking for help with similar problem! 

Seems like my header is covering my background image in the section below it for mobile version only. I feel like I've tried everything. 

http://www.extramilepediatrics.com

You mean reduce this spacing?