Scale logo on mobile device using Minnow theme
-
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)
-
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.
-
- The topic ‘Scale logo on mobile device using Minnow theme’ is closed to new replies.