Oxygen Theme text and logo alignment

• 

  thescatteredpelican · Member · Sep 16, 2015 at 12:20 pm

  • Copy link
  • Add topic to favorites

  Hi. I need some help with the code to align the text and logo on the website.
  Essentially what I need is the text and description to be on the left hand side and the logo on the far right.

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

• 

  thesacredpath · Member · Sep 16, 2015 at 6:53 pm

  • Copy link

  @thescatteredpelican, I’m not seeing a logo on your site right now, so I assume you wish to add one via CSS. I see an image in your media library with the title/description and a logo to the right and I also see a couple of pelican images, so I don’t know which one you want to use. The following CSS will put the smaller pelican logo to the right of your site title/description down to the width when it clashes with the site description and then we adjust the width of the description. At 480px, the logo starts to overlap the title and description, so I then center the text and put the logo above it.

  hgroup {
  	background: url("https://thescatteredpelican.files.wordpress.com/2015/08/scatteredpelicanlogoofficial.jpeg") no-repeat scroll right top /contain transparent;
  }
  @media screen and (max-width: 767px) {
  	.site-description {
  		padding-right: 20%;
  	}
  }
  @media screen and (max-width: 480px) {
  	hgroup {
  		background-position: center top;
  		background-size: 130px auto;
  	}
  	.site-title a, .site-description {
  		padding-right: 0;
  		width: 100%;
  		text-align: center;
  	}
  	.site-title a {
  		padding-top: 90px;
  	}
  }

  Make sure and view things on a phone and tablet to see how things look.