Background Image in Mobile

My site is http://hungrynomads.in. Take a look at the logo, which is inserted as a background image using this in the custom CSS

#branding {
background-image: url("*********");
background-repeat: no-repeat;
background-position: top left;
background-size: 484px 100px;
}

It appears absolutely fine on the desktop, but on the mobile it doesn’t resize it (please see mobile_view.jpg). What can I do here, so that it appears fine in both desktop and mobile?

attached the file

Hi @hungrynomads,

I hope you are well today and thank you for your question.

Do not use logo like that instead use it by setting it in the theme Header Options as displayed in the attached screenshot.

Best Regards,
Movin

Thank you. I changed to the way you said, but now have some extra white space below my logo (I used a PNG - 290 * 112 size).

Can I get rid of the extra white space below the logo?

You can try removing that extra white space by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Travelify Other Options


hgroup#site-logo {
    margin-top: 0;
}
h1#site-title {
    margin-bottom: 0;
}
.hgroup-wrap.clearfix {
    padding-bottom: 0;
}

Works like a charm!!

You are most welcome here :slight_smile: