Jump to content

Subject's head cut off in banner when in landscape mode on mobile

Recommended Posts

  • Replies 3
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • 2 weeks later...

@Darine It looks like the image in this template is set to start at the top of the page behind the navigation in desktop mode regardless of how tall the navigation bar is, which is why that's happening. So the navigation is covering the top of the image. You can add padding or margin to the first block of content on every page in your custom CSS to overcome that like this:

@media (min-width:800px {
	.page-section:first-of-type .section-background {
		top: 100px !important;
	}
}
@media (min-width:641px) and (max-width:799px) {
	.page-section:first-of-type .section-background {
		top: 150px !important;
	}
}

Or if you JUST want this to happen on these two specific pages and not all the rest of the site, then you can include the body ID to limit your code just to those specific pages, like this:

@media (min-width:800px {
	#collection-651a42029bd6d313af619e60 .page-section:first-of-type .section-background, #collection-651a2e096ce641658310faa8 .page-section:first-of-type .section-background {
		top: 100px !important;
	}
}
@media (min-width:641px) and (max-width:799px) {
	#collection-651a42029bd6d313af619e60 .page-section:first-of-type .section-background, #collection-651a2e096ce641658310faa8 .page-section:first-of-type .section-background {
		top: 150px !important;
	}
}

Let me know if that works?

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.