Display Logo Smaller on Mobile Devices

Support
#1

Hey Support Team,

I hope you can help me. I want to display the logo smaller on movile devices. My website is http://testumgebung-simbach.de/

I tried it with some CSS but it did not work.

@media(max-width:767px) {
.x-brand img {
width: 100px !important;
}
}

@media(max-width:480px) {
.x-brand img {
width: 45px !important;
}
}

I hope you can help me.

Thank you very much.

Best regards
Mario

#2

Hi Mario,

Thank you for writing in, actually, your CSS above is correct. Maybe there is a syntax error somewhere on your custom CSS, that is why the added CSS rule is not working.

Please check your entire custom CSS here, and resolve any syntax error it may find.

Only then add that custom CSS you shown above.

Hope it helps,
Cheers!

#3

Hello,

thanks a lot for your help. I checked my CSS and it seems to be correct.
Do you have any idea how to solve the problem?

Best regards
Mario

#4

Please provide us login credentials in a secure note so we can take a closer look.

Thanks,

#5

Thank you very much for your help!

#6

Hi Mario,

I checked and can see that you forgot to close your @media css code

eg.


@media(min-width:1400px) {
    .x-brand {
         position: absolute;
    }

    .x-nav-wrap.desktop {
           text-align: center;
    }
    .x-nav-wrap.desktop ul li ul {
           text-align: left;
     }

I went ahead and close it



@media(min-width:1400px) {
     .x-brand {
         position: absolute;
     }

     .x-nav-wrap.desktop {
          text-align: center;
     }
     .x-nav-wrap.desktop ul li ul {
          text-align: left;
      }
}   /*  this bracket was missing */

You may now add this code at the end.

@media(max-width:767px) {
.x-brand img {
width: 100px !important;
}
}

@media(max-width:480px) {
.x-brand img {
width: 45px !important;
}
}

Thanks

#7

Thank you so much!

Best regards

Mario

#8

You’re welcome! :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.