Unable to centralize logo and tagline for all media

• 

  bourbonpaddy · Member · Jan 17, 2018 at 3:54 pm

  • Copy link
  • Add topic to favorites

  I am trying to get my logo and tagline centralized on the photo blog theme. Currently they’re both only centralized on mobile view but I’d like it consistent across media. I’d also like to have my tagline in italics if possible, and my menu options to appear beneath the tagline and left justified instead of right justified. What CSS do I need to make this happen?

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

• 

  thesacredpath · Member · Jan 17, 2018 at 6:55 pm

  • Copy link

  Hi there, this was a bit of a challenge, but the following will center the logo and tagline for you.

  @media screen and (min-width: 768px) {
    .site-title-description {
      width: 100%;
      display: block;
    }
    .site-branding .site-logo .custom-logo-link {
      margin-left: auto;
      margin-right: auto;
      float: none;
    }
    .site-branding {
      width: 100%;
    }
    .site-description {
      text-align: center;
      display: block;
    }
  }

• 

  bourbonpaddy · Member · Jan 18, 2018 at 5:41 pm

  • Copy link

  Perfect, thanks! I’m also having issues with my images in my post appearing off centre. Is there anything that can be done for this or will I start a seperate thread? Thanks again.

• 

  thesacredpath · Member · Jan 18, 2018 at 9:21 pm

  • Copy link

  With the way the images with an alignment of none are done onPhoto Blog, when you added the padding and white background color to entry-content it offset the image from center. Add this to your max-width: 768px media query, which re-centers the image by increasing the negative left margin.

  .entry-content img.alignnone {
      margin-left: -122px
  }

• 

  bourbonpaddy · Member · Jan 19, 2018 at 11:58 am

  • Copy link

  Thanks again this worked perfectly!

• 

  thesacredpath · Member · Jan 19, 2018 at 5:21 pm

  • Copy link

  You are welcome.