Jump to content

Change Section Height for Mobile Only

By addisonpann, in Customize with code

Go to solution Solved by DPruitt,

Recommended Posts

addisonpann Level 5

addisonpann

Posted
Posted

Site URL: https://www.greenslate.group/

Site password: toast

 

I want to change the section height of the hero banners on all pages of my site (Portfolio, About, and Services, as they are the only ones with hero banners). They're set to Medium height in the Format menu, which I like for desktop, but I want them to be Small height when viewing the page on a mobile device.

Apologies in advance if there is already a thread that solves my issue; I looked, but none of the resolved threads were quite what I am looking for.

Thanks!

Link to comment
  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

  • Solution
DPruitt Level 5

DPruitt

Posted
  • Solution
Posted

Try this: 

@media screen and (max-width: 540px) {
#sections
.page-section:first-child
{min-height: 20px!important;}
}

If you need to also reduce the padding to the section: 

@media screen and (max-width: 540px) {
#sections
.page-section:first-child
.content-wrapper
{padding:0px !important}
}

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources