skeebodelta Posted November 3, 2021 Posted November 3, 2021 Site URL: https://www.richardsaltermusic.com/ Hi all. Hoping someone can help me with this please? All looking good on my desktop site but mobile seems to cut off headings on a couple of the sections. See screenshot. Anybody got a fix for this please? Thanks in advance! x
Beyondspace Posted November 4, 2021 Posted November 4, 2021 20 hours ago, skeebodelta said: Site URL: https://www.richardsaltermusic.com/ Hi all. Hoping someone can help me with this please? All looking good on my desktop site but mobile seems to cut off headings on a couple of the sections. See screenshot. Anybody got a fix for this please? Thanks in advance! x How do you intend to arrange them? Arranging them in one column makes your content covered by the header BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
skeebodelta Posted November 4, 2021 Author Posted November 4, 2021 @bangank36 Thanks! I want them the same as on my desktop site: My name top centre & navigation items laid out underneath. See attached...
Beyondspace Posted November 4, 2021 Posted November 4, 2021 So i think reducing the line height of navigator that downsizes the height of header is one of the solutions. Your header in mobile would not cover the headings You can try adding to your Home > Design > Custom Css @media only screen and (max-width: 767px){ .header .header-nav-wrapper a, .header .language-item a { line-height: 1.6 !important; } } Let me know how it works on your site BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
Beyondspace Posted November 4, 2021 Posted November 4, 2021 My testing result BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
skeebodelta Posted November 4, 2021 Author Posted November 4, 2021 @bangank36 Thanks! I tried this but it's not quite working for me. The headings are still cut off & the header navigations are still in the same place. Is there a way to add spacer on mobile only? Or something similar? St least to fix the section headings being cut off? Plus, I was hoping to get the navigation menu under my name, which would be centralised at the top.
Beyondspace Posted November 4, 2021 Posted November 4, 2021 You can try decreasing the line-height value until it can reduce the header so that prevents cutting heading BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
skeebodelta Posted November 4, 2021 Author Posted November 4, 2021 @bangank36 Yeah, I tried that, but there has to be so little space that it's too difficult to hit the separate navigation headings.
Beyondspace Posted November 4, 2021 Posted November 4, 2021 Adding some margin-right or left can solve the space between navigator button Does it make any sense with this result? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
skeebodelta Posted November 4, 2021 Author Posted November 4, 2021 @bangank36 Thanks! I really want my name top centre & all navigations below, rather than name on left & nav on right. Is there a way to do this?
Beyondspace Posted November 4, 2021 Posted November 4, 2021 12 minutes ago, skeebodelta said: @bangank36 Thanks! I really want my name top centre & all navigations below, rather than name on left & nav on right. Is there a way to do this? Finally I think i've reached your idea Is it the result you want to achieve? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
Beyondspace Posted November 4, 2021 Posted November 4, 2021 You can replace my previous codes with the following ones @media only screen and (max-width: 767px) { .header-title-nav-wrapper { flex-direction: column !important; } .header-nav { width: 100% !important; } .header-title-nav-wrapper .header-nav-item a { font-size: 1rem; margin: 0 5px; line-height: 1.5; } } Let me know how it works on your site Support me by pressing 👍 if this useful for you BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
skeebodelta Posted November 4, 2021 Author Posted November 4, 2021 @bangank36 You did it! Looks perfect! Thanks! x
failbetter Posted November 16, 2021 Posted November 16, 2021 @bangank36 Can you help me figure out how to make my links stop stacking on smaller screens? Or maybe even go above the logo (centre) like this one above? https://www.sucoca.com/contact pw:chocolate
tuanphan Posted November 18, 2021 Posted November 18, 2021 On 11/16/2021 at 8:38 PM, failbetter said: @bangank36 Can you help me figure out how to make my links stop stacking on smaller screens? Or maybe even go above the logo (centre) like this one above? https://www.sucoca.com/contact pw:chocolate Add to Design > Custom CSS nav.header-nav-list { white-space: nowrap !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
failbetter Posted November 18, 2021 Posted November 18, 2021 Hi @tuanphan I just tried that and sadly it doesn't work.
tuanphan Posted November 20, 2021 Posted November 20, 2021 On 11/18/2021 at 6:20 PM, failbetter said: Hi @tuanphan I just tried that and sadly it doesn't work. It looks like you changed nav to burger. Do you still need help on this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
failbetter Posted November 22, 2021 Posted November 22, 2021 Yes i just did that because i couldn't figure it out....
failbetter Posted November 23, 2021 Posted November 23, 2021 @tuanphan https://share.getcloudapp.com/xQujoz2X This is what is happening - id like the nav links to stop stacking
tuanphan Posted November 26, 2021 Posted November 26, 2021 On 11/23/2021 at 11:21 PM, failbetter said: @tuanphan https://share.getcloudapp.com/xQujoz2X This is what is happening - id like the nav links to stop stacking You can revert normal navigation, then we can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Archived
This topic is now archived and is closed to further replies.