Jump to content

How to adjust header menu picture for desktop and mobile?

Recommended Posts

https://www.calsharkey.com/

I'm using a custom header for my homepage to display a scrollable gallery underneath the header/navbar, it works great but the problem is certain pictures look good on mobile but not desktop, or vice-versa. For example this one:

ScreenShot2024-03-04at12_34_57PM.thumb.png.f55b984e5ba6ddbf875b8103cec71401.png

ScreenShot2024-03-04at12_35_16PM.thumb.png.4ca31e2a4a1fc07dfcfa9fd8bf2aecea.png

As you can see it doesn't work for desktop since it hides the name/menu. I just need to adjust the height/position of it so the white sky is the background for the black text. I have a lot of pictures like this, is there some way to lock the position in place where I need it? I can't find any options in the gallery settings that let me do this.

Here's the code I'm using for the header as well:

body.homepage article section:first-child {
    padding-top: 0px !important;
}

Thanks for any help! Really appreciate it.

Link to comment
  • Replies 1
  • Views 995
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

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.