Switch comments and sharing buttons in single-post view

• 

  brandy99 · Member · May 23, 2016 at 10:18 am

  • Copy link
  • Add topic to favorites

  I please need the CSS to make comments on my posts appear above the sharing buttons and related posts section, id=”jp-post-flair”
  I am using the Chateau theme.

  The blog I need help with is: (visible only to logged in users)

• 

  siobhyb · Member · May 23, 2016 at 6:30 pm

  • Copy link

  Hi there,

  The following will move the comments section above the sharing buttons on all devices that are 650px or over in width:

  @media screen and (min-width: 650px) {
  .single-post #jp-post-flair {
  	position: absolute;
  	bottom: -210px;
  }
  
  .single-post #primary {
  	position: relative;
  	margin-bottom: 210px;
  }
  }

  We’d need to duplicate the above CSS with some more media queries to achieve the same effect on smaller devices.

  Can you give that first piece of CSS a test and let me know how that goes? I can then help you with the extra media queries.

• 

  brandy99 · Member · May 26, 2016 at 10:28 am

  • Copy link

  Now I have many lines without any text between my last sentence and the like button

• 

  siobhyb · Member · May 26, 2016 at 12:15 pm

  • Copy link

  Hi there,

  I can see multiple instances of the following HTML at at the very bottom of your post:

   

  That HTML is used to create a new line and, so, explains why there are multiple new lines at the bottom of your post.

  To remove, could you click on the option to Edit when viewing your post. You will see two tabs at the top of your editor: Visual and HTML. Switch to the HTML editor and then scroll down to remove some of the unneeded HTML.

• 

  brandy99 · Member · May 28, 2016 at 8:02 am

  • Copy link

  I have deleted that lines but what do I have to do that the comments are printed under the like button?

• 

  siobhyb · Member · May 29, 2016 at 9:52 pm

  • Copy link

  Hi there,

  To add your CSS, firstly head to My Site in the top left of WordPress.com and then choose the option to Customize from the left sidebar:

  https://wordpress.com/customize/schwanenteichblog.com

  Navigate to the CSS panel and copy/paste the following:

  @media screen and (min-width: 650px) {
  #main {
  	position: relative;
  	padding-bottom: 70px;
  	margin-bottom: 170px
  }
  
  #jp-post-flair {
  	position: absolute;
  	bottom: 0;
  }
  
  div#jp-relatedposts {
    position: absolute;
  }
  }

  I tweaked the original CSS I provided as I realised that I hadn’t accounted for posts that display related posts beneath them.

  Can you give that a go and let me know if it works out for you?

  Thanks!

• 

  brandy99 · Member · Jun 1, 2016 at 8:17 am

  • Copy link

  Thank you very much for your help. It seems that’s all o.k.

• 

  siobhyb · Member · Jun 1, 2016 at 12:42 pm

  • Copy link

  I’m glad to hear that! Please don’t hesitate to start another thread if you have any extra questions.