Logo Goes out of boundaries on Mobile

my logo for mobile is 230x38px
URL: http://nicoblog.org/

On my phone which resolution is 480×854 it doesn’t fit, it goes over the menu and search buttons.

Initially when the page loads it fits perfectly but about a second later it gets bigger and doesn’t fit, i don’t see what makes it go out. Can someone help me?

These are my custom css

.entry-thumb {
float: none;
margin-right: auto;
margin-left: auto;
}

.share-nicoblog {
    background-color: #222222;
}

.share-nicoblog p {
    color: #ffffff;
}

.list-all-posts {
    margin-left: 20px;
}

.widget_ratings-widget img, .post-ratings img {
    display: inline-block;
}

.td-post-image-full {
    left: 0;
    width: 640px !important;
}

• This topic was modified 10 years by CreepyRavioli.

Hi

I’ve checked your site on my side and the logo it’s displed fine. If you still have this issue try this css to set a lower width for logo on smaller screens: http://screencast.com/t/X160brVQf

@media (max-width: 480px){
.td-main-menu-logo img {
max-width: 280px
}
}

You can change the values as you want.
Thanks!

Hi thanks for the help. It’s weird i added your code, cleared cloudflare cache and phone cache, reloaded several times but the problem remains the same.

Hi

That was just an example value, you cal try a few smaller values and also try it with a stronger rule like here:

@media (max-width: 480px){
.td-main-menu-logo img {
max-width: 240px!important
}
}

Thanks!