Logo image stuck at size for mobile view '480px & smaller’ using CSS, please help!

Support
#1

Hi, I’m adapting the CSS for the mobile view '480px & smaller’ and I’m trying to increase the size of the logo, but it seems stuck at 275px and if I set it any higher, it just adds white space either side of the logo without increasing the image! I may have gone wrong with the CSS somewhere and I’ve tried to sort it but haven’t got any further forward!

I’d be grateful of any help you can offer. I’ll put the URL in a secure note as it’s on a temp link.

Thanks!

#2

Hi There,

Thanks for the details and the link!

This is due to the image max-width setup to 100% by default in the CSS.
Which means it won’t be bigger than the container, in which it contains.

You can override the max width through CSS.
max-width: auto !important;

Hope this helps!

#3

Hi, unfortunately that hasn’t worked I’m afraid. I’ve tried to increase the size of the logo and it just keeps adding white space either side of it instead.

Here’s the CSS I’m using:

.x-brand.img {
    margin-top: 73px;
    float: left;
  width: 320px !important;
  max-width: auto !important;
}

Thanks!

#4

Hi There,

Please change your custom CSS to this:

@media (max-width: 480px) and (min-width: 250px){
    .x-brand.img {
        margin-top: 73px;
        float: left;
    }
    .x-brand img {
        width: 320px !important;
        max-width: inherit !important;
    }
}

Hope that helps and thank you for understanding.

#5

That’s great, it worked, thanks!

#6

Glad that we could help you!

Thanks

#7

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