Adding "Page Title" to top of Blog Landing Page (screenshots included)

Hi there, I believe I tried all the built-in options to add a "Page Title" to my blog's landing page. I am thinking I need to inject code into the specific page I am editing? I am currently using v7.1 and have the Business Plan. I have the ability to add code via the Design page or through the individual Page's setting.

The Page I am trying to edit is a Blog and the blog layout is Basic Grid.

This is what the Blog's landing page looks like right now (Notice that no text/title can be inserted above the grid):

What I would like to do is to add text (the Page Title as seen in the navigation bar) to the top of the Blog's Landing Page. Here is a Photoshopped example of what I am trying to achieve:

Thank you very much in advance to anyone that may be able to help.

Note: the text in the website is all in Korean in case you're wondering. The purpose of the site is to provide real estate information.

I don't think this is possible out of the box in 7.1, which is frustrating. I feel like we should be able to add a section here to give an introduction.

Feature request SquareSpace?

1 hour ago, ChrisBartow said:

I don't think this is possible out of the box in 7.1, which is frustration. I feel like we should be able to add a section here to give an introduction.

Feature request SquareSpace?

Thanks for trying! The closest I have been able to get is by creating a whole new section (+) and making it a text based one and then minimizing the vertical space to a minimum. It's not bad but not really what I'm looking for because of the fact that there is so much white space created by having two separate sections stacked.

I've been trying to research all sorts of CSS/code injection options.

Adding section and minimizing height:

So so result (too much white space below "Sample Text"):

I didn't even know you could add a section there! There is definitely a way to do some CSS trickery to remove the whitespace. You'll probably have to remove the white space around the SAMPLE TEXT and then remove the top margin or padding from the next section with the actual blogposts.

I did something like this on one of my test sites, but you have a different blog layout. Which one are you using?

.content-wrapper, .blog-alternating-side-by-side .blog-alternating-side-by-side-wrapper {
  padding-top:0 !important;
  padding-bottom:0 !important;
}

55 minutes ago, ChrisBartow said:

some CSS trickery to remove the whitespace

Yes! You're a lifesaver, Chris. I didn't think to try the padding. The padding around the text was actually ok with me. I tried changing the padding of the Blog section. Along these lines, I did the following:

.blog-basic-grid {
 padding: 0vw 4vw 4vw 4vw !important;
}

I removed just the top white space around my basic blog grid. I gathered from the source code(?) that Squarespace set the default spacing for the basic grid blog to 4vw all around(?). So I figured that I would set the top to 0 and set the left/right/bottom spacing to 4vw.

It looks perfect on desktop and on mobile. Hoping it stays this way.

Thanks so much for leading me to the right direction. This is fun!

Final:

2 minutes ago, beginnercss said:

Thanks so much for leading me to the right direction. This is fun!

I'm glad you were able to figure it out. Sites looking good!

21 hours ago, ChrisBartow said:

I'm glad you were able to figure it out. Sites looking good!

Wondering if you might be able to help with one more thing ...

The blog landing page from yesterday is all good. Thanks again!

I am now working on the appearance of the blog posts themselves. The padding of the top and bottom for the post seems to be too large.

What I'm seeing:

Top of blog post

Bottom of blog post

I am trying to remove the white space indicated by the red arrows. I have experimented with some code but had no luck.

Also, clicking the pencil to edit the post only allows the following options:

Playing with "Header Spacing" only moves the address down but does nothing to move the post itself closer up to the navigation bar.

Greatly appreciate any insight!

That does seem extreme, I don't know of a setting that would be causing that.  Do you have a link to the page so I can look at it?

@ChrisBartow

Here it is: https://www.inssatoronto.com/home/liberty

Note - looks just fine on mobile. Just on desktop does the extreme white spacing occur.

@ChrisBartow

Update! I think I figured out why the blog post got pushed down. I set the site margin in design to 12vw because I wanted the left and right sides to be pushed in towards the center. Looks like setting it to 12vw affected top/bottom/left/right. Ideally, I;d like to keep the left and right sides pushed inwards while keeping the top and bottom margins to a minimum (~4 vw).

Current situation (red = bad; green = good):

Design setting:

Update 2: Interestingly, changing the margin to 12vw affects only the blog posts themselves (like the one linked above). It does not change other pages like this one or the blog landing pages:

The first setting on the individual posts is content width (seen in your second screenshot with blog settings). You can change this to narrow instead of medium which is probably the better way to achieve this within the system.

I've found that resetting the site margin back to the default and then setting the content width of the blog to narrow makes the blog itself look good but the site margins too wide. So I've tried something like this:

• Set site margin to 12vw
• On the blog, enter this code:

  @media only screen and (min-width: 760px) {
    .blog-item-wrapper {
  margin-top: -12vw;
  margin-bottom: -12vw;
   padding-top: 0px;
   padding-bottom: 0px;
    }
  }

• The -12vw for margin-top and margin-bottom is intended to offset the 12vw setting for the left and right.
• Because the Medium content width setting pushed the blog a bit too much, I am now using the Custom function under content width to balance it all out.

Thank you again for all the help!