Scale logo on mobile device using Minnow theme

• 

  mariannejgordon · Member · Nov 9, 2014 at 3:36 am

  • Copy link
  • Add topic to favorites

  Hi, I’m incredibly new to css and my logo image won’t scale down on mobile phones.
  What do I need to add in the css so it will scale down?
  I’ve done a lot of internet searching but nothing seems to work.

  Thanks in advance!

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

• 

  thesacredpath · Member · Nov 9, 2014 at 7:37 pm

  • Copy link

  Hi there, change the #masthead rule you have in your custom CSS to the following and see what you think.

  #masthead {
      background: url("//mjgbeauty.files.wordpress.com/2014/11/banner21.jpg") no-repeat scroll center top / 100% auto rgba(0, 0, 0, 0);
      height: auto;
      margin: 0;
      max-width: 100%;
      padding-bottom: 20%;
  }

  In the background declaration, I changed the 0 0 to center top and I also added the / 100% auto which sets the image width to 100% and the height to auto so that it can scale. I also added the 20% bottom padding so to control the spacing between the image and the content and set the max-width to 100% rather than setting a static width. Same for the height, I set it as auto so that things can resize with the browser window and/or screen.

• 

  mariannejgordon · Member · Nov 10, 2014 at 11:26 am

  • Copy link

  Thank you so so much! It works perfectly!