CSS Code to Update Logo Size on Mobile

• 

  givememeatloaf · Member · Nov 23, 2017 at 2:26 am

  • Copy link
  • Add topic to favorites

  I was able to add the CSS code below to make my logo bigger, and it looks great on site + tablet, but it’s way too big on mobile so that you can’t even read it. I’ve tried numerous codes I’ve found online and nothing seems to stick other then the code at the bottom that at least has allowed me to hide it on mobile until I can find a fix – any ideas? Help SO appreciated!

  .site-branding a img {
  display: none;
  }

  .site-branding {
  height: 200px;
  background-image: url(‘https://givememeatloaf.files.wordpress.com/2017/11/2018-meatloaf-logo-transparent.png’);
  background-size: 400px;
  background-repeat: no-repeat;
  background-position: center;
  }

  .header-info {
  top: 40%;
  }

  @media (max-width: 480px) {
  .site-branding {
  background: url(‘//givememeatloaf.files.wordpress.com/2017/11/2018-meatloaf-logo-transparent.png”’) no-repeat scroll center center / contain rgba(0,0,0,0);
  margin-top: 3px !important;
  width: 250px;
  }
  }

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

• 

  baldfreud · Member · Nov 23, 2017 at 10:57 am

  • Copy link

  Hi @givememeatloaf. Try by commenting out your background for max-width 480px as your logo is already defined under .site-branding. Then add a line with: background-size: contain;

  @media (max-width: 480px)
  
  .site-branding {
   /* background: url(https://givememeatloaf.files.wordpress.com/2017/11/2018-meatloaf-logo-transparent.png”) no-repeat scroll center center / contain rgba(0,0,0,0); */
      margin-top: 3px !important;
      width: 250px;
      background-size: contain;
  }
  
  .site-branding {
      height: 200px;
      background-image: url(https://givememeatloaf.files.wordpress.com/2017/11/2018-meatloaf-logo-transparent.png);
      background-size: 400px;
      background-repeat: no-repeat;
      background-position: center;
  }

  Hope this helps.

• 

  kathrynwp · Staff · Nov 23, 2017 at 4:16 pm

  • Copy link

  Thanks for pitching in, baldfreud! I edited your reply to remove an extraneous bit (“?custom-css=1&c…e=6&csrev=25:1”) and put your CSS between code formatting tags for easier reading/copy-pasting.

  givememeatloaf – let us know how this goes or if you need further help.

• 

  givememeatloaf · Member · Nov 23, 2017 at 5:21 pm

  • Copy link

  Thank you so much for trying to help, I’ve posted this exact thing and it’s still not sizing right on mobile, I just can’t figure this out!

• 

  kathrynwp · Staff · Nov 23, 2017 at 5:45 pm

  • Copy link

  I just looked at baldfreud’s code more carefully and there are some syntax errors in it. Let’s fix it up. :)

  First, I’d suggest clearing out your current custom CSS so we can start fresh.

  Now, let’s look at your original CSS.

  I don’t think you need these parts:

  .site-branding a img {
  display: none;
  }

  .header-info {
  top: 40%;
  }

  I’m not sure what you were trying to accomplish with that, but removing those bits has no effect, so I would just omit them.

  Now, let’s look at the rest of your original CSS. Instead of setting a fixed 400px background size, let’s try changing that to contain instead. It seems to work well, even at small screen size.

  .site-branding {
    height: 200px;
    background-image: url('https://givememeatloaf.files.wordpress.com/2017/11/2018-meatloaf-logo-transparent.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  That seems to look good, without the need for a media query.

  

  Give this a try in your Customizer and let me know how it goes for you!

• 

  givememeatloaf · Member · Nov 23, 2017 at 8:17 pm

  • Copy link

  You are a rockstar! Thank you, that worked – okay one last ask! :D The logo is showing on my post pages but it’s transparent so you can’t see it – is there a way for me to remove from my post pages, or change the color? Thank you!!!

• 

  kathrynwp · Staff · Nov 23, 2017 at 8:26 pm

  • Copy link

  In that case, why don’t we restrict the logo to just your homepage, by removing what I gave you before and adding this instead:

  .home .site-branding {
    height: 200px;
    background-image: url('https://givememeatloaf.files.wordpress.com/2017/11/2018-meatloaf-logo-transparent.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }