Notacoder Posted January 20, 2021 Share Posted January 20, 2021 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? Beyondspace 1 Link to comment
Beyondspace Posted January 21, 2021 Share Posted January 21, 2021 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; } } 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, Lightbox Studio pluginIf 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
Notacoder Posted January 21, 2021 Author Share Posted January 21, 2021 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? Beyondspace 1 Link to comment
Beyondspace Posted January 21, 2021 Share Posted January 21, 2021 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? 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, Lightbox Studio pluginIf 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
Notacoder Posted January 21, 2021 Author Share Posted January 21, 2021 Actually that part is okay. I want to reduce the padding around the logo, see attachment. Beyondspace 1 Link to comment
Beyondspace Posted January 22, 2021 Share Posted January 22, 2021 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; } } Poppyseeds and tuanphan 2 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, Lightbox Studio pluginIf 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
Iwan Posted May 2, 2022 Share Posted May 2, 2022 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 Link to comment
Beyondspace Posted May 5, 2022 Share Posted May 5, 2022 It looks fine on my side, which one do you want to fix? 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, Lightbox Studio pluginIf 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment