css help with mobile logo

@talesbyfirelightcom,

Can you please share your website url here? It is more easier to provide you quick solution for your query.

Please provide a link with support requests:)
Check out this tutorial- https://www.kadencethemes.com/chrome-inspect-tool/

Hannah

Thanks to both of you for such fast responses!

@addweb-solutino-pvt-ltd

My website is talesbyfirelight.com

@hannahritner

That link is just what I need. I’m not a web designer, I just sort of picked up CSS because it stuck in my brain. Thank you!

Have a great day!

Your logo is appearing centralized when I test on a mobile device, your .kad-header-left class appears to be working fine for me.

Firebug is a good way to inspect your code too if you’re a Firefox user, you can expand or collapse your code elements using the small arrows alongside each element.

Highlighting an element by clicking on it will display the CSS code that is being applied to the highlighted element also, you can modify this CSS code and the changes will appear live on your site which is a great way to test code.

Hope this helps.

@themesumo

Thanks for taking a minute to check out my logo issue.

It’s strange. The logo is now dipping down too far and every time I refresh it moves into a different spot?

Why would it do this?

talesbyfirelight.com

Thanks again!

I can see what you mean, after a little fiddling about, I figured out how you can centralize your logo at all widths.

Add this to your Child Theme style.css file, or using a Custom CSS plugin.

@media screen and (max-width: 999px) {
    .kad-lg.kad-standard-logo-tranbg {
        max-height: none !important;
        max-width: 303px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 767px) {
    .kad-lg.kad-standard-logo-tranbg {
        max-width: 210px;
	margin-top: -20px
    }
}

Hope this helps.

@themesumo

Thank you for taking to time to help me out!

I’ll try this out.

Thanks!

Great! Would be awaiting for your inputs.