How to move primary meta data (categories) below blog title

Site URL: https://www.infinityartists.squarespace.com

See attached—would love the primary meta data (categories) below the blog title!

Password: infinity

Can you share link to page in screenshot? I don't see it in above page.

Thank you!!!

https://www.infinityartists.squarespace.com/talent

17 hours ago, merakiconceptstudio said:

Thank you!!!

https://www.infinityartists.squarespace.com/talent

Add to Page Header

<style>
  .blog-basic-grid .blog-basic-grid--text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
</style>

It was working, but it's stopped working now. 🤨 Any ideas?

On 2/9/2021 at 11:44 PM, merakiconceptstudio said:

It was working, but it's stopped working now. 🤨 Any ideas?

The url doesn't exist.

On 2/5/2021 at 3:43 AM, tuanphan said:

Add to Page Header

<style>
  .blog-basic-grid .blog-basic-grid--text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
</style>

 

I just went in search of a solution for this same problem and this code worked perfectly for me. Thanks!

On 2/5/2021 at 10:43 PM, tuanphan said:

Add to Page Header

<style>
  .blog-basic-grid .blog-basic-grid--text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
</style>

 

@tuanphanWhen I add this code to the page header, it moves the meta data under the title, but moves both of them to the bottom of the block under the description. Do you know how I could fix that? Thanks so much!

On 11/2/2022 at 2:52 PM, melaniejaane said:

@tuanphanWhen I add this code to the page header, it moves the meta data under the title, but moves both of them to the bottom of the block under the description. Do you know how I could fix that? Thanks so much!

Can you share link to page? We can check it again easier

On 11/5/2022 at 3:02 AM, tuanphan said:

Can you share link to page? We can check it again easier

Thanks @tuanphan page is a work-in progress

Website: beehyve.health/adhd-support-contacts
Password:  abc

On 11/7/2022 at 12:49 PM, melaniejaane said:

Thanks @tuanphan page is a work-in progress

Website: beehyve.health/adhd-support-contacts
Password:  abc

 

Hi,

What should it look like?

Hi @tuanphan - Quick question for you. 

I used this code to move the primary meta content to be below the blog title, but it also flipped the excerpt to the top instead.  Is it possible to move the blog primary meta content to be below the title and retain the excerpt to be on the bottom?

I'm attaching a screengrab for reference.  The locations are the primary meta content and the rooms like Pantry, Closet, etc. are the excerpts.

Website: https://pumpkin-orange-3ld6.squarespace.com/
Password: Real2023

Thank you!

14 hours ago, whereisscott said:

Hi @tuanphan - Quick question for you. 

I used this code to move the primary meta content to be below the blog title, but it also flipped the excerpt to the top instead.  Is it possible to move the blog primary meta content to be below the title and retain the excerpt to be on the bottom?

I'm attaching a screengrab for reference.  The locations are the primary meta content and the rooms like Pantry, Closet, etc. are the excerpts.

Website: https://pumpkin-orange-3ld6.squarespace.com/
Password: Real2023

Thank you!

 

Can you share link to this page? I don't see it on main page

@tuanphan Of course - thank you for helping.  Here is the link to this page:

Website: https://pumpkin-orange-3ld6.squarespace.com/portfolio
Password: Real2023

13 hours ago, whereisscott said:

@tuanphan Of course - thank you for helping.  Here is the link to this page:

Website: https://pumpkin-orange-3ld6.squarespace.com/portfolio
Password: Real2023

You can add this to Design > Custom CSS. Adjust number in the code to change position of 3 elements

.blog-excerpt {
    order: 1 !important;
}
.blog-title {
    order: 2 !important;
}
.blog-meta-section {
    order: 3 !important;
}

Note that the position here will be calculated from the bottom up.

Hi @tuanphan

Thanks so much for your time on this.  I added the code to CSS and I didn't see any changes (and I tried different orders to the above). 

I also removed the original code you had created in the original post here from being injected into the header of the blog as well as clearing out all other custom CSS, but this also didn't affect the order.  (I also tried injecting just this code into the header).  Let me know if I may be doing this incorrectly...  Thanks so much again.

Use this CSS code, you can adjust number in the code to change positions of 3 elements

.blog-basic-grid--text {
    display: flex;
    flex-direction: column;
}
.blog-excerpt {
    order: 1 !important;
}
.blog-title {
    order: 2 !important;
}
.blog-meta-section {
    order: 3 !important;
}

Yes, This fixed it - Can't thank you enough, @tuanphan!