Logo is not responsive

So the problem is in this rule that appears to be in the Custom CSS:

.site-branding img {
   height: 160px;
   width: 600px;
}

That rule keeps the image too wide on a cell phone.

A couple of things you can do:

1. Remove the rule entirely. It appears that the size of the image is pretty close to the dimensions that are being set in the rule, so the rule doesn’t have that great an effect.
2. Or if you want to keep that rule in place, add a media query that sets the height and width to auto when the screen size gets under 760px (tablet width):

   
   @media only screen and (max-width: 760px) {
      .site-header .site-branding img {
         height: auto;
         width: auto;
      }
   }
   

By the way, I know you posted a link to your site in another thread, but you should make it a habit of including it in every new thread so that someone who hasn’t seen your previous threads will be able to easily find it. Thanks.

• This reply was modified 8 years, 1 month ago by CrouchingBruin.

Once again, you did it! Thank you so much! The logo now proportionately resizes down. I had to save the code in the “wordpress/appearance/edit css” section but it is working!

Thank you again!!

I had to save the code in the “wordpress/appearance/edit css” section but it is working!

Ah, OK, now I understand, you’ve got JetPack’s Custom CSS option activated. Yes, that works. In fact, I prefer using a CSS plugin over a child theme’s stylesheet in most cases, especially JetPack’s, because JetPack puts its custom CSS just before the opening body tag, so it’s easier to override any existing CSS. Glad it worked.

Oh, I didn’t realize Jetpack was doing that?! Especially since my child theme FTP should be updating the files, too. At least we know that option works.

Because the screen does say “Note: Custom CSS will be reset when changing themes.” I will save a local copy of those custom CSS edits on my end, too. Thank you again!!

Because the screen does say “Note: Custom CSS will be reset when changing themes.” I will save a local copy of those custom CSS edits on my end, too.

Wow, I never noticed that before. It makes sense, because the elements from one theme mostly don’t have the same class names as others, although many of the WordPress classes will be the same.

I just tried it on my test site: started with Twenty Sixteen, added some CSS, switched to Twenty Fourteen, and CSS is gone. Switched back to Twenty Sixteen and CSS is gone. It would be nice if Jetpack’s custom CSS saved the settings for each theme; maybe I’ll post a suggestion on their support page. Thanks for letting me know about it.

You’re welcome! I was definitely surprised about that lack of capability with all the other things that Jetpack CAN do. Because if it doesn’t save the custom CSS, what is the point of adding it in the first place? I’ll help vote for your suggestion if there’s a way to do so.