On Mobile my Logo does not resize

Support
#1

On mobile my Logo does not resize. This is for the smaller screen sizes like 320 or 375. This is what I have in place. Where am I going wrong?

@media only screen and (max-width: 320px) {
body .x-brand img { width: 120px; }
}

@media only screen and (max-width: 480px) {
.x-brand img {
width: 150px;
}
}

@media only screen and (max-width: 500px) {
body .x-brand img { width: 260px; }

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

@media only screen and (max-width: 979px) {
body .x-navbar.x-navbar-fixed-top { position: fixed!important; }
#footer-logo {width:25%;}
}

#2

Hi @GeorgiaG,

Thank you for reaching out to us. Try replacing your logo part code with the following:

@media screen and (max-width: 767px){
    .x-brand img {
        max-width: 200px;
    }
}

@media screen and (max-width: 500px) {
    .x-brand img { max-width: 180px; }
    .x-btn-navbar {margin-right:20px;}
}

@media screen and (min-width: 320px) and (max-width: 480px) {
    .x-brand img { max-width: 100px; }
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope.

Don’t forget to clear all caches including your browser’s cache after adding the code. Hope this helps!

#3

Thank you. It is perfect! Also thanks very much for the documentation.

#4

You’re more than welcome, glad we could help.

Cheers!

#5

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