Jump to content

Section headings cut off on mobile

Recommended Posts

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

Mark Texts - 1 (1).jpg

How do you intend to arrange them? Arranging them in one column makes your content covered by the header

image.png.1498c95118177f8edc9051cf1a5016e9.png

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

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 (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

My testing result

image.png.1771f405c941f066ac76190d95ec3e7d.png

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

@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.

Edited by skeebodelta
Link to comment

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 (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

Adding some margin-right or left can solve the space between navigator button

image.png.e142a6280579784862a81db32ad6484b.png

Does it make any sense with this result?

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

image.png.f07b59fdb20f5c4acb0f9f3bb14d3f2e.png

Is it the result you want to achieve?

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

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 (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
  • 2 weeks later...
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 

Screenshot 2021-11-16 at 13.37.49.png

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!)

Link to comment
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!)

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.