Jump to content

Change Header Size on Mobile Only

Recommended Posts

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;
        }
}

image.png.22f9b034e589acda3345048e178028d9.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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?

Link to comment
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?

image.png.58c36b8eeb4fe222c77628b48422e8ef.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
8 hours ago, Notacoder said:

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

image.png.22f9b034e589acda3345048e178028d9.png

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;
    	}
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 1 year later...

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

image.thumb.png.2a7c86da0cf2e7c82d9d12056e8085ef.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.