Problem with welcome Logo Size on Mobile


#1

Hello,
Firstly, your Moesia theme is very nice. This is actually my first foray into website building via wordpress. I am much more familiar with simple drag and drop wysiwyg applications i.e. Wix, weekly, etc. I have a good deal of experience in design but not much in programing, and the way in which wordpress sites are built utilizing themes is definitely new to me. But I think I’m starting to get the hang of it.

I’ve run into a small snafu that I think can probably be solved utilizing some custom CSS. Basically, I want the logo image from the welcome section to resize when its being viewed on a mobile device. I’d like it to be 500 from a desktop and about 300 for mobile devices - really just smart phones - tablets should be able to view the size 500 the way I intend.

I’ve already installed the “simple custom CSS” plugin and input a small bit of code that you recommended to another user for a different application. Not sure whether this may be affecting it my issue. The CSS was provided by Vlad to another user who wanted to make sure that the header image didn’t automatically fill the screen.

Thank you for your help and please do not hesitate to request further info. My website url is www.stilehomes.net

Cheers.
A


#2

Hey,

So I see you’ve set it for 500px, now you only need to add a media query to set it at 300px for smaller screens:


@media screen and (max-width: 600px) {
    .welcome-logo {
         max-width: 300px;
    }
}

This will apply for screens of 600px and smaller, you can change it to something else if you want.


#3

Thanks! I’ll give it a try and see what happens.


#4

Hi Vlad,

I have the same problem on my wife’s internal site. I tried what you suggested above (with and without !important), but it doesn’t seem to be able to override the value that is set via the Appearance / Customize / General / Logo Size entry. Do you have an other suggestions on how we can scale the logo when on mobile devices?


#5

Hey,

The code above refers to the welcome logo. If you’ve used a big site logo and you’re trying to make it smaller for mobile devices, then you would use .site-logo instead of .welcome-logo. And obviously adjust to your needs.


#6

Heh, I’m an idiot and cut and pasted too eagerly! Thanks for pointing out the obvious to me. :slight_smile:


#7

Hi Vlad.

I don’t know if this is solved?
I’m having a similar problem with my welcome logo. It won’t resize for mobile (or smaller screens). I have used the code above in my child style.css but it did not solve it…

Could you help me please?

How do I make it responsive?


#8

Hi,

Please try this Custom CSS instead and let Us know how it works:

@media screen and (max-width: 600px) {
.welcome-logo {
    max-width: 150px !important;
}
}

Best Regards,
Csaba


#9

@Csaba: That did the trick! I was missing !important.
Thanks, you made my day.

Solved.


#10

Hi,

Great! I’m glad it’s resolved! If you need help with anything else, please open a new topic.

Have a nice day!

Best Regards,
Csaba