Jump to content

Adjusting height of content sections on index pages

Recommended Posts

Hi there,

I'm using the Bedford theme and I've been trying to use a page section under an index page as a title. I've seen it resized on other Squarespace sites but cannot get the size of the content section for the title to change, it is far too big and there is no way to drag it to make it smaller.

I was able to get the top margin to adjust when inputting a negative value, but it looks terrible in mobile. Additionally, it appears there is no way to adjust the bottom margin, as doing the same just causes the content below it to overlap on top of the section above (I believe this is a collapsing margin issue).

I've attached an image below. Any help would be greatly appreciated, thank you!

 

Page Header Margins.PNG

Link to comment
  • Replies 2
  • Views 517
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

I found a solution, though it is not ideal - I couldn't get the div to resize responsively with the content contained in it so I just made hard tweaks to each display size. I am aware this may cause issues on non-conventional screen sizes so if anyone else has a better, responsive fix please let me know. Here is what I implemented below, where the div is the name of the title section contained within the Index for each page:

 

For Desktop:
 

#contact-header, #appearances-header, #journalism-header, #about-header, #home-header {
    min-height: unset !important;
    max-height: 180px;
    margin-top: -60px;
}

 

For Tablets:

@media screen and (min-width: 641px) and (max-width:950px) {
 #home-header {
  background-color: #223a5e;
  padding-top: 0px;
  padding-bottom: 50px;
  }
  #contact-header, #appearances-header, #journalism-header, #about-header {
  padding-top: 0px;
  }
}

 

For Phones:

@media screen and (max-width: 640px) {
 #home-header {
  padding-top: 50px;
  padding-bottom: 50px;
  }
  #contact-header, #appearances-header, #journalism-header, #about-header {
  padding-top: 50px;
  }
}

Below is the final result.

Final Result.PNG

Edited by charmeddesign
Accidentally used wrong dimensions in desktop code
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.