Jump to content

Mobile H1 header text getting cut off by mobile header bar

Recommended Posts

Hi, my H1 header text was getting cut off on mobile by the header bar. To fix this I moved it down a little but now it looks great for mobile and terrible for desktop because the header text is moved way too far down.

I am not sure what to do. 

I have also been finding that trying to vertically space out blocks by separating them by 1 or 2 rows in the grid does't seem to work. The space disappears either on mobile or desktop so two blocks are on top of each other. 

The only thing that seems to work is adding hitting the return key and adding a blank line above or below header text but then that seems to add a lot of padding again either in mobile or desktop. 

I feel like you just can't win. 

Right now I just need a solution to have my H1 header not be cut off by the header bar on mobile and on desktop to not have 200px or more above my H1 header as a result. 

Maybe there's a way to put padding only in mobile below the header bar?

Please help. 


Screen Shot 2023-07-16 at 2.51.36 PM.png

Screen Shot 2023-07-16 at 2.25.16 PM.png

Screen Shot 2023-07-16 at 2.24.58 PM.png

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.