Docs

[Jacob D]

Despite trying several suggestions on archived threads, I’m unable to get an alternate logo to load when viewed on mobile phones. The current logo looks great on desktops and most tablets, but on phones the wide version doesn’t play nice, so I was wanting to get a more compact, stacked version to sit next to the mobile menu. Below is the latest iteration of code which I pulled from the forums here in some archived threads, but I’m yet to get it working, so I’m not sure if something in X has changed since this solution was provided or if I’ve just managed to bork it up.

@media screen and (min-width: 980px){
.x-brand img {
background-image: url("http://cerulean.pmcgdev.com/wp-content/uploads/2016/06/cer-2016-wide-logo.png") !important;
/* this is responsive, or background-size:100% auto; */
background-size: 100% 100%; 
background-repeat: no-repeat;
}
}
@media screen and (max-width: 979px){
.x-brand img {
background-image: url("http://cerulean.pmcgdev.com/wp-content/uploads/Cerulean-Mobile-Logo.png") !important;
}
}

The dev site is viewable here: http://cerulean.pmcgdev.com/ so any advice anyoen might have would be greatly appreciated!

[Christopher]

Hi there,

Please try this code :

@media (max-width:979px){
a.x-brand.img {
    background-image: url("http://cerulean.pmcgdev.com/wp-content/uploads/Cerulean-Mobile-Logo.png") !important;
    width: 67%;
    display: inline-block;
    background-size: contain;
    height: 50px;
    background-repeat: no-repeat;
}
x-brand img {
    display: none;
}
}

Hope it helps.

[Jacob D]

Thank you for the reply! I dropped that in and am still seeing the wide logo both in X’s mobile preview and on my mobile device, despite refreshing and clearing my cache.

[Thai]

Please delete the previous CSS.

And try with this instead:

@media (max-width:979px){
    a.x-brand.img {
        background-image: url("http://cerulean.pmcgdev.com/wp-content/uploads/Cerulean-Mobile-Logo.png") !important;
        width: 67%;
        display: inline-block;
        background-size: contain;
        height: 50px;
        background-repeat: no-repeat;
    }
    .x-brand img {
        display: none;
    }
}

Regards!

[Jacob D]

Thanks for the updated CSS, but no luck – still showing the wide logo both in the X mobile preview and on my actual mobile device.

[Jacob D]

I just activated a child theme and saved the provided CSS in the child theme’s style.css and it worked! Not sure why it won’t work from the custom CSS field in the admin area, but I’ll call this one a win!

[Joao]

Glad to hear it Jacob

Let us know if you need help with anything else.

Joao

[Author]

Posts