Position and size of logo

• 

  emilypshea · Member · Jan 26, 2017 at 4:27 am

  • Copy link
  • Add topic to favorites

  I added a logo to the heading of my page, and I don’t want it to sit on top of the title. I would like the logo to go to the right or left side of the title, and possibly be bigger.

  Site I need help with: http://theeverydaytravelers.com

  I added a logo to the heading of my page, and I don’t want it to sit on top of the title. I would like the logo to go to the right or left side of the title, and possibly be bigger.

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

• 

  eallas · Member · Jan 26, 2017 at 1:44 pm

  • Copy link

  Howdy emilypshea!

  I added a logo to the heading of my page, and I don’t want it to sit on top of the title. I would like the logo to go to the right or left side of the title, and possibly be bigger.

  The following code should do the trick of having the logo to the left side of the title & description. The end piece of the code changes the size of your logo specifically. Let me know if you run into any problems.

  @media screen and (max-width: 850px){
  
  .site-title {
      position: relative;
      top: 25px;
      left: 25px;
  }
  
  .site-description {
      position: relative;
      top: 20px;
      left: 25px;
  }
  
  .site-logo-link img {
      display: flex;
      float: left !important;
      height: 100px !important;
      width: 100px;
  }
  
  }

• 

  emilypshea · Member · Jan 26, 2017 at 7:33 pm

  • Copy link

  Thank you. If I just copy and paste this code into “Customizing CSS” will that do the trick?

• 

  eallas · Member · Jan 26, 2017 at 7:40 pm

  • Copy link

  Yes, by going to https://wordpress.com/customize and clicking on CSS, you can paste it into there and it should do the job.

• 

  emilypshea · Member · Jan 26, 2017 at 7:54 pm

  • Copy link

  Hi again! I did that, but it’s not appearing to make any changes on the homepage of my site. What else should I try? Thank you

• 

  eallas · Member · Jan 26, 2017 at 8:00 pm

  • Copy link

  Try this:

  {
  
  .site-title {
      position: relative;
      top: 25px;
      left: 25px;
  }
  
  .site-description {
      position: relative;
      top: 20px;
      left: 25px;
  }
  
  .site-logo-link img {
      display: flex;
      float: left !important;
      height: 100px !important;
      width: 100px;
  }

• 

  emilypshea · Member · Jan 26, 2017 at 10:27 pm

  • Copy link

  Still no luck. Should I check off the box that says “Don’t use the theme’s original CSS” ?

• 

  staff-loquaciousloon · Staff · Jan 31, 2017 at 3:35 pm

  • Copy link

  Hi @emilypshea!

  Don’t check that box, no – that would mean you’re writing all of the CSS for the entire site :)

  It does look like you’ve managed to shift your logo to the left since your last post. Did you still need a hand?

• 

  eallas · Member · Jan 31, 2017 at 4:04 pm

  • Copy link

  It seems I added an extra “{” in my last post and they may have removed it to get it working. My apologies for the delayed response.

• 

  emilypshea · Member · Jan 31, 2017 at 6:03 pm

  • Copy link

  No worries, thank you!