centre the site title vertically between the logo and the media slideshow

• 

  susanbarwood192 · Member · Nov 24, 2015 at 7:50 am

  • Copy link
  • Add topic to favorites

  Hi, I am very happy with the Janice Theme on my site Susan Barwood Photography but would like to centre the site title vertically between the logo and the media slideshow beneath.
  Please help.
  Cheers Susan

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

• 

  ogurel · Member · Nov 24, 2015 at 8:30 am

  • Copy link

  Hi Susan,

  You can “vertically align” the site title by using a margin-top: 15px on the site-title class.

  If you need help on how to do that, please let me know.

  Thanks,

  Onur

• 

  susanbarwood192 · Member · Nov 26, 2015 at 2:09 pm

  • Copy link

  Hi Onur,
  Yes I would like help on how to do that please.
  Thanks
  Susan

• 

  ogurel · Member · Nov 27, 2015 at 7:03 am

  • Copy link

  Hello Susan,

  You can use the following custom CSS code to make it align vertically:

  .image-header
  {
      height: 285px;
  }
  .site-title
  {
      margin-top: 30px;
  }

  You can play with these values to increase the space between the flower image and the slideshow below.

  Also, since not every image has the same dimensions, the site title will sometimes seem not aligned properly.

  I hope this helps, please write back if you need more help.

  Take care,

  Onur

• 

  susanbarwood192 · Member · Nov 27, 2015 at 12:19 pm

  • Copy link

  Thanks Onur. This worked great with the laptop view but on my iPhone there is still a huge gap between the site title and the slideshow. How can I remedy that please? I will make all the slideshow images a uniform width 980 pixels.

  Thanks for your help so far much appreciated.

  Susan

• 

  thesacredpath · Member · Nov 28, 2015 at 1:43 am

  • Copy link

  Hi there, first thing to do is to edit your main page and remove the empty paragraph from the top above the gallery. That will tighten up things considerably, both on desktops and also on tablets/mobiles.

  Second thing is to remove the following rules from your CSS.

  #content {
      margin-top: -3em;
  }
  .image-header {
      height: 285px;
  }
  @media screen and (min-width: 768px) {
  #content {
      margin: 3em;
  }
  }

  Then add the following and let’s see how this looks to you.

  #primary {
      margin-top: 0;
  }
  .site-title {
      padding-top: 30px;
  }