Section headings cut off on mobile

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

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

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

My testing result

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

You can try decreasing the line-height value until it can reduce the header so that prevents cutting heading

@bangank36

Yeah, I tried that, but there has to be so little space that it's too difficult to hit the separate navigation headings.

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

Does it make any sense with this result?

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

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?

@bangank36

Yep, that's it!

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

@bangank36

You did it! Looks perfect!

Thanks!

x

@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 

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

Hi @tuanphan I just tried that and sadly it doesn't work.  

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?

Yes i just did that because i couldn't figure it out....

@tuanphan

https://share.getcloudapp.com/xQujoz2X

This is what is happening - id like the nav links to stop stacking 

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