Responsive Custom Title Image: Hemingway Rewritten

• 

  crunkletonhsv · Member · Jan 15, 2015 at 3:23 pm

  • Copy link
  • Add topic to favorites

  Hi There,

  I recently updated the CSS of my blog to replace the title text with a custom logo image and it looks great for desktop and iPad viewing, however the image is not responsive. On mobile viewing it stays the same size and get’s cut off because it’s too big.

  Is there some extra CSS I can add to the theme to make the custom title image responsive with the rest of my theme for mobile viewing?

  Here’s the custom CSS I added:

  .site-title {
  	background: url('http://i1260.photobucket.com/albums/ii575/crunkletonmarketing/Logo_With_Yellow_zps105ea639.png') center center no-repeat;
  	width: 600px;
  	height: 145px;
  	display: block;
  }
  
  .site-title a {
  	display: none;
  }

  Thanks for your help!

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

• 

  thesacredpath · Member · Jan 16, 2015 at 3:18 pm

  • Copy link

  Let’s move your image to .site-branding and set a 90% width and auto height background size (the / 90% auto bit in the background declaration). This isn’t perfect since the height of the black background area stays static which means that on smaller window widths or screens, there is a good bit of black above the title. See if this works better for you and we can see about possibly using some media queries to adjust the height of the black area on smaller screens.

  .site-title {
      display: block;
      height: 140px;
      width: 600px;
  }
  .site-title a, .site-title a:hover {
      color: rgba(0, 0, 0, 0);
      display: none;
      padding-top: 50px;
  }
  .site-branding {
      background: url("http://i1260.photobucket.com/albums/ii575/crunkletonmarketing/Logo_With_Yellow_zps105ea639.png") no-repeat scroll center center / 90% auto rgba(0, 0, 0, 1);
  }

• 

  crunkletonhsv · Member · Jan 16, 2015 at 3:25 pm

  • Copy link

  That did it! Thank you so much for your help!

• 

  crunkletonhsv · Member · Jan 16, 2015 at 3:30 pm

  • Copy link

  Although the only thing I notice now is that it has removed the grey divide bar between the logo and the tagline now.

  Then as far as the large black box goes, is there a way to get the image/text to at least be centered in the box, otherwise the extra black doesn’t bother me enough to mess with that bit.

  Thanks :)

• 

  thesacredpath · Member · Jan 16, 2015 at 10:00 pm

  • Copy link

  Change out .site-branding with the following and the added two new rules and see what you think. I think it works pretty well, even on small screens.

  .site-branding {
      background: url("http://i1260.photobucket.com/albums/ii575/crunkletonmarketing/Logo_With_Yellow_zps105ea639.png") no-repeat scroll center 20% / 90% auto rgba(0, 0, 0, 1);
  }
  .site-description {
      border-top: 1px solid #ccc;
  }
  .site-description:before {
      height: 0;
  }