Add divider title between portfolio sections

I have created a portfolio overview page and wanted to ask how to divide some of the rows and add titles? 

For example I want to separate my projects by its location, first 2 rows are Australia and the last row is America.

Mark up in red.

Can you share your website URL and this page?

https://orca-heron-9w69.squarespace.com/projects

pw: literallyAnything

Tricky, I'm not sure I can add a different row gap, this should work, but it's very reliant on you not adding any more portfolio items to the Australian 6 (...unless you add 3!).

@media only screen and (max-width:766px) {
  .portfolio-grid-basic .grid-item[href="/projects/coworking-space-melbourne"] {
    margin-top:42px;
  }
}
@media only screen and (min-width:767px) {
  .portfolio-grid-basic .grid-item[href="/projects/coworking-space-melbourne"], .portfolio-grid-basic .grid-item[href="/projects/sc-johnson"], .portfolio-grid-basic .grid-item[href="/projects/selwyn-village-lichfield-towers"] {
    margin-top:42px;
  }
}

Let me know how you go with that.

All good re; multiples of 3, we'll always be uploading projects 3 at a time.

See screenshot for implementation of code. It's pushed down Coworking Space project and SC Johnson project but not the one to the right of it to it, so doesn't seem to have done the whole row.

Also, is there a way to add text before the portfolio grid itself and between rows where we've tried to add extra space like in the mock up?

I've amended the code in my previous post.

We may be able to add in some text like this:

.portfolio-grid-basic .grid-item[href="/projects/coworking-space-melbourne"]:before {
  content:'Australia';
  text-align:left;
  height:42px;
}

But after adding this, we'll have to adjust the previous code.

I adjusted the margin size and the text attributes but the text seems anchored to Co working space rather than the row. The text should be centred to the whole row. It also pushed that project down. Prior to adding the text, with your adjusted code the margins worked great, everything in that row got pushed down.

Also how would I add the text above the very first row too (so before the whole grid of images)? Would it be a similar code but referencing a different project name?

I got the images to be inline by specifying a smaller margin for the first project (co working space) but not sure how to center the text to the page.

I managed to center it to the page by changing what the text was targeting to, I made it target the second project instead but when it came to mobile view where it's one project per row, the text was before the second project but after the first. So this wasn't a solution, I still need the text centered.

@media only screen and (max-width:766px) {
  .portfolio-grid-basic .grid-item[href="/projects/coworking-space-melbourne"] {
    margin-top:120px;
  }
}
@media only screen and (min-width:767px) {
 .portfolio-grid-basic .grid-item[href="/projects/sc-johnson"], .portfolio-grid-basic .grid-item[href="/projects/selwyn-village-lichfield-towers"] {
    margin-top:120px;
  }
}
.portfolio-grid-basic .grid-item[href="/projects/coworking-space-melbourne"] {
  margin-top:78px;
}

.portfolio-grid-basic .grid-item[href="/projects/coworking-space-melbourne"]:before {
  content:'USA';
  text-align:center;
  font-family: freight-big-pro !important;
  font-weight: 500 !important;
  font-size: 2.5rem !important;
  color: #364EA0 !important;
  height:42px;
}

I've adjust the code, let me know if that works:

@media only screen and (max-width:766px) {
  .portfolio-grid-basic .grid-item[href="/projects/coworking-space-melbourne"] {
    margin-top:120px;
  }
}
@media only screen and (min-width:767px) {
  .portfolio-grid-basic .grid-item[href="/projects/coworking-space-melbourne"], .portfolio-grid-basic .grid-item[href="/projects/selwyn-village-lichfield-towers"] {
    margin-top:120px;
  }
}

.portfolio-grid-basic .grid-item[href="/projects/sc-johnson"]:before {
  content:'USA';
  text-align:center;
  font-family: freight-big-pro !important;
  font-weight: 500 !important;
  font-size: 2.5rem !important;
  color: #364EA0 !important;
  height:120px;
}

I've removed the margin from the project with the title, and set that height to match the margin size.

That has worked but USA is appearing under SC johnson project in mobile view not before Coworking space project. Unfortunately I think having the text targeting before: SC Johnson is the problem, although it does center the text in desktop view.

There's also a large gap before Coworking space in mobile view.

Add this after height in the last line, before the closing bracket:

    display: flex;
    align-items: center;
    justify-content: center;

It didn't do anything with Sc Johnson assigned as the target. So I changed it back to Co working space and it fixed everything on mobile view but left desktop looking like this again. 

@media only screen and (max-width:766px) {
  .portfolio-grid-basic .grid-item[href="/projects/coworking-space-melbourne"] {
    margin-top:190px;
  }
}


@media only screen and (min-width:767px) {
  .portfolio-grid-basic .grid-item[href="/projects/sc-johnson"], .portfolio-grid-basic .grid-item[href="/projects/selwyn-village-lichfield-towers"] {
    margin-top:90px;
  }
}

.portfolio-grid-basic .grid-item[href="/projects/coworking-space-melbourne"]:before {
  content:'USA';
  text-align:center;
  font-family: freight-big-pro !important;
  font-weight: 500 !important;
  font-size: 2.5rem !important;
  color: #364EA0 !important;
  height:90px;
  display: flex;
    align-items: center;
    justify-content: center;
}

I put a colour for the background so we can see what's going on and it seems to be centering to that project rather than the whole row

All good, fixed. Not the best practise but I made the width 307% to span across the whole row and then on mobile view, kept it to 100%

8 hours ago, JasmineT said:

I put a colour for the background so we can see what's going on and it seems to be centering to that project rather than the whole row

Yes, the rows are not specified because of the grid layout, they're dynamic, so the text is inserted above an individual item and then spacing add above the other two in the row to balance it.

The 300% should work, but you're right, it's not the best practice.