Docs

[Sarah S]

Hi! I have a website where I have the logo overhanging the navbar and the slider image. The code I use is this:

.x-brand img {
margin-bottom: -30px;
margin-top: -30px;
}

But on the mobile site, its covering up everything. Is there a way to make the logo on the desktop site bigger? And reduce the size on the mobile site?

The site is http://southcentralcattleco.com/

Right now, I reduced the size so it would look ok on the mobile site. But the client doesn’t like how small it is on the desktop site.

Thanks in advance. –KD

[Joao]

Hi Sarah,

That is definitely possible.

Since you have the small logo the code below will affect any device bigger than 480px wide, that meaning pretty much everything that is not a mobile. You can adjust the value according to your wishes. If you would like a different solution let us know and will be a pleasure to help you.

@media (min-width 480px) {
.x-brand img {
    width: 300px;
    margin-top: -80px;
}
}

Hope that helps

Joao

[Sarah S]

PERFECT! Thank you so much!

[Joao]

Hi Sarah,

That is great to hear it.

Whenever you need help or have any questions let us know.

Thanks

Joao

[Author]

Posts