different logo for mobile

It nests the mobile logo within the div logo

In mobile that turns off the display for the entire div

Thanks yigit will try now, basically the issue is that second logo is nested with the logo div itself

I already placed important, I did try what your saying this is my css. The issue is I have to place the important rule on the first .logo css as in the theme it has a display rule already that overrides it if important is not in plcae. Resulting in both the mobile and non mobile logos rendering

@media only screen and (min-width: 480px) {
.second-logo { display: none; }}
@media only screen and (max-width: 480px) {
.logo { display: none!important; }
.logo a.second-logo {
display: block!important;
}