How to move my logo to the right

• 

  siharris · Member · Jul 28, 2014 at 8:46 am

  • Copy link
  • Add topic to favorites

  How can I move my logo to the right? I’m using the motif business theme. Can I also make it a little bigger? Please help. TIA

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

• 

  thesacredpath · Member · Jul 28, 2014 at 3:30 pm

  • Copy link

  Hi there, in the following, I’ve limited the change to browser/device widths greater than 600px, which is the point where the logo and the title/description move to a centered position for tablets and phones. Give this a try and see what you think.

  @media screen and (min-width: 601px) {
      .site-branding img {
          float: right !important;
      }
      .site-title, .site-description {
          max-width: 400px;
          position: relative;
          top: -75px;
      }
  }

  On making the image larger, how much larger do you want it to be?

• 

  siharris · Member · Jul 30, 2014 at 5:31 am

  • Copy link

  Wow! It looks better. Can we make the title and tagline a little lower than the logo? I’m okay with the logo size. I’m also wondering how to put my contact number below the logo. Great thanks!

• 

  thesacredpath · Member · Jul 30, 2014 at 4:18 pm

  • Copy link

  Can we make the title and tagline a little lower than the logo?

  Yes, just adjust the -75px “top” value to move the title and tagline up or down.

  I’m also wondering how to put my contact number below the logo.

  I would suggest doing this below the logo for 601px and wider and then below the tagline/description for 600px and narrower. Replace the CSS you have now with the following and see what you think.

  @media screen and (min-width: 601px){
  	.site-branding img{
  		float:right !important
  	}
  
  	.site-title,.site-description{
  		max-width:400px;
  		position:relative;
  		top:-75px
  	}
      .site-branding:after {
          content: "Contact me: 555.555.5555";
          float: right;
          color: #CCC;
          position: relative;
          top: -50px;
      }
  
  }
  
  @media screen and (max-width: 600px) {
      .site-description:after {
          content: "Contact me: 555.555.5555";
          color: #CCC;
          margin-left: auto;
          margin-right: auto;
          margin-top: 15px;
      }
  }

• 

  thesacredpath · Member · Jul 30, 2014 at 4:27 pm

  • Copy link

  Oh yeah, I forgot to mention that you can edit the content declaration as you desire.

• 

  siharris · Member · Jul 31, 2014 at 3:00 am

  • Copy link

  Thanks a lot! You’ve been a great help.