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; } } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, 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? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, 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; } } tuanphan and Poppyseeds 2 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, 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? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
traylorbl Posted June 10 Share Posted June 10 (edited) 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 Edited June 10 by traylorbl Link to comment
tuanphan Posted June 11 Share Posted June 11 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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