Jump to content

Custom CSS to move author profile of blog to bellow the title rather than at the bottom of page

Recommended Posts

Add the following to Blog Settings > Advanced > Page Header Code Injection for the blog page. Please see per-page code injection.

<style>

  .blog-item-content-wrapper {
  
    display : -webkit-box;
    display : -ms-flexbox;
    display : flex;
    
    -webkit-box-orient : vertical;
    -webkit-box-direction : normal;
    -ms-flex-direction : column;
    flex-direction : column;
    
    }
    
  .blog-item-author-profile-wrapper {
  
    -webkit-box-ordinal-group : 0;
    -ms-flex-order : -1;
    order : -1;
    margin-top : 0;
    
    }
    
  </style>

Or alternately add the following to Design > Custom CSS.

.blog-item-content-wrapper {

  display : -webkit-box;
  display : -ms-flexbox;
  display : flex;
  
  -webkit-box-orient : vertical;
  -webkit-box-direction : normal;
  -ms-flex-direction : column;
  flex-direction : column;
  
  }

.blog-item-author-profile-wrapper {

  -webkit-box-ordinal-group : 0;
  -ms-flex-order : -1;
  order : -1;
  margin-top : 0;
  
  }

This is for v7.1.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
4 hours ago, creedon said:

Add the following to Blog Settings > Advanced > Page Header Code Injection for the blog page. Please see per-page code injection.

<style>

  .blog-item-content-wrapper {
  
    display : -webkit-box;
    display : -ms-flexbox;
    display : flex;
    
    -webkit-box-orient : vertical;
    -webkit-box-direction : normal;
    -ms-flex-direction : column;
    flex-direction : column;
    
    }
    
  .blog-item-author-profile-wrapper {
  
    -webkit-box-ordinal-group : 0;
    -ms-flex-order : -1;
    order : -1;
    
    }
    
  </style>

Or alternately add the following to Design > Custom CSS.

.blog-item-content-wrapper {

  display : -webkit-box;
  display : -ms-flexbox;
  display : flex;
  
  -webkit-box-orient : vertical;
  -webkit-box-direction : normal;
  -ms-flex-direction : column;
  flex-direction : column;
  
  }

.blog-item-author-profile-wrapper {

  -webkit-box-ordinal-group : 0;
  -ms-flex-order : -1;
  order : -1;
  
  }

This is for v7.1.

Let us know how it goes.

Works fantastic. however the spacing is a little bit to high between the author and the title, what would I change to decrease that gap?

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.