Please help me to optimize the mobile version

[zingtz]

Dear sir/Madam,

I would like to extand my thanks for your timely help as always. I am using the x-education theme, i have encounter the problem that in the mobile version, the logo is too big. I have thought one solution that in the mobile version, can i put another horizonal logo instead of this vertical logo?
like this?

[rad]

Hi Tianze,

Thanks for reaching out.

It’s only possible with Pro theme, you can control the visibility of images per device and able to display specific logo for each. But since you’re on X theme, the only solution would be adding CSS but it’s not recommended. You may add this CSS to Theme Options > CSS along with the URL of your mobile logo URL.

@media ( max-width: 767px ) {
.x-brand img {
display: none;
}
.x-brand {
width: 100px;
height: 50px;
background: url(http://example.com/your-image.jpg);
background-size: cover;
}
}

Please note that you need to change the width and height too until your image fits into it.

Thanks!