My logo is cut off

• 

  downrivershape · Member · May 23, 2014 at 2:38 pm

  • Copy link
  • Add topic to favorites

  How do I move the Site Title over so that the logo doesn’t get cut off as it appears right now?

  The CSS I have for getting them in the same line is as follows:

  /* ===== begin logo ===== */
  
  .site-header h1 a:before {
  	content: "";
  	display: block; width: 48px; height: 48px;
  	margin: 0 auto 12px;
  	background-image: url(http://downrivershape.files.wordpress.com/2014/05/downriverstred29ar04bp01zl-grant4b.png
  			);
  	background-size: cover;
  }
  .site-header h1 { margin-bottom: 0; }
  
  @media screen and (min-width: 300px) {
  	.site-header h1 a:before {
  		width: 100px; height: 100px;
  		position: absolute; top: 0; left: -120px;
  	}
  	.site-title, .site-description { position: relative; margin-left: 100px; }
  }

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

• 

  thesacredpath · Member · May 26, 2014 at 6:49 pm

  • Copy link

  Hi there, I see the logo gets cut off at about 600px in screen/browser window width. Replace the CSS you have now with the following which addresses that mainly by using background size “contain” instead of cover. I’ve also included a second media query to center the site title and description at 599px and below so that it looks more balanced with the centered logo above. See what you think when you try this and narrow down your browser window.

  /* ===== begin logo ===== */
  .site-header h1 a:before {
      background-image: url("//downrivershape.files.wordpress.com/2014/05/cropped-downriverstred29ar04bp01zl-grant4b_mdm.jpg");
      background-repeat: no-repeat;
      background-size: contain;
      content: "";
      display: block;
      height: 100px;
      margin: 0 auto 12px;
      width: 130px;
  }
  
  .site-header h1 {
  	margin-bottom: 0;
  }
  
  @media screen and (min-width: 600px) {
  	.site-header h1 a:before {
  		width: 150px;
  		height: 100px;
  		position: absolute;
  		top: 0;
  		left: -160px;
  	}
  
  	.site-title, .site-description {
  		position: relative;
  		margin-left: 120px;
  	}
  }
  @media screen and (max-width: 599px) {
      .site-title, .site-description {
          text-align: center
      }
  }
  /* ===== end logo ===== */