Help with resizing logo for mobile view - please!

[WildC]

Hi there,

I know there are some community members who rock #CSS so I would be so grateful if someone could help me. I resized the logo in the header on my site (responsive theme) because it was too small to be legible but now on mobile view it obscures the first text on the page.

I have read the various answers to similar questions but I still can't make it work except by restoring the size to the original 40px. 

My site is: http://art.cherryjeffs.com/

All help gratefully received!

Thanks,

Cherry

[BJ5]

Try adding something like this to your main-style.css file at the bottom, if you've already edited your theme:

@media screen and (max-width: 767px) {
 .no-header-page #main-wrap {
 padding-top: 155px !important;
 }
}

[BJ5]

If you didn't edit your theme, put a <style> tag before that code and </style> tag after it, then paste it into Settings > SEO > Header Code.

[WildC]

Thanks @BJ I DID edit the theme!

[WildC]

Thank you so much @BJ - that totally worked I am forever grateful!

Do you think I need to do anything for any other screen sizes? I saw another solution which also mentioned 480px...

Best,

Cherry

[Jo79]

I am having the same issue with my logo, but this particular fix didn't work for me - I imagine because the theme is different? Just wondering if you could take a look at it: https://mmtemp88.weebly.com/ and let me know if you have any ideas? Thank you! 🙂

[Adam7]

Is your site live, @Jo79? It'll probably help to see the live site.

[Jo79]

Yes, I believe so. You can see it at: https://mmtemp88.weebly.com/

[Millsy1]

Hi Adam,

I am also desperate for some help with my logo for my friends wedding.

It is a png, but when i put it into mobile model the logo is dramatically small.

Is there any chance you could please have a look for me?

Website is: https://sophieandbradley.weebly.com/

Thanks!

Amelia

[BJ5]

Try this in Settings > SEO > Header Code, @Millsy:

<style>
    @Media (max-width: 992px)
    {
        .wsite-logo a img 
        {
            max-height: none !important;
            padding: 10px !important;
        }
        .navmobile-wrapper
        {
            padding-top: 105px !important;
        }
    }
</style>

[Millsy1]

Thanks heaps!

[zenihama]

Thanks so much - this helped for me too