Logo in responsive website versions in Twenty Eleven theme

• 

  hyenaproject · Member · Jan 21, 2016 at 12:41 pm

  • Copy link
  • Add topic to favorites

  Hi there,

  I recently chatted to the wordpress support team and they adviced me to ask for help in the CSS forum. We added our logo with CSS left of the site identity (project name) into the header. We have the Twenty Eleven theme. Important for us is, that logo and site identity adapt themselves in the tablet and mobile version of the website! It should appear like in the Desktop version, but in the tablet and mobile version it´s always slightly broken. Is there something we can do with CSS to fix it in responsive website versions??

  Thank you!

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

• 

  thesacredpath · Member · Jan 22, 2016 at 11:15 pm

  • Copy link

  Hi there, see what you think of this. First off, remove this from your custom CSS and save in a plain text file for safe keeping and reference.

  header#branding {
  	background-image:url('https://hyenaproject.files.wordpress.com/2015/07/logo-website1.jpg');
  	background-repeat:no-repeat;
  	background-position:left 8% top 6%;
  	background-size:10%
  }

  Next, paste this in at the bottom of your custom CSS and then see how it reacts to different browser window widths and also view on a tablet and phone. I’ve used some Media Queries to change and adapt the design for smaller screens.

  #site-title {
      background: url("https://hyenaproject.files.wordpress.com/2015/07/logo-website1.jpg") no-repeat scroll left top / contain;
      padding-top: 0;
      margin-top: 1em;
  }
  #site-title a {
      margin-left: 0;
      padding-left: 70px;
  }
  @media screen and (max-width: 850px) {
  	#site-title, #site-description {
  		width: 100%;
  	}
  	#branding #searchform {
  		top: 1em;
  	}
  	#branding hgroup {
  		margin-top: 60px;
  	}
  }
  @media screen and (max-width: 525px) {
  	#site-title a {
  		font-size: 22px;
  	}
  	#site-description {
  		font-size: 18px;
  	}
  }