[Chris AParticipant]

Hello, my url is http://943.784.myftpupload.com
I am happy with the settings in the header and logo on the desktop full version of the site, however I would like the logo to shrink much smaller on a mobile device almost to where the logo and menu tab icon would make an even horizontal row at the top, rather than the uneven look it shows on my iPhone when I test now. How can I make this logo responsive to shrink on mobile devices? Thanks.

[Paula SMember]

Hi Chris,

Thanks for writing in! We have a similar topic discussed on a previous thread here that can also help you out. (http://theme.co/x/member/forums/topic/my-super-big-logo-in-icon-doesnt-resize-with-browser/) In case you are stuck or need further help though, feel free to post here and update us. Have a nice day!

[Chris AParticipant]

I gave this a test and it did work, however is there a way to use this method for the logo and mobile devices, and still have it be optimized for retina display? This method did use an alternate version of the logo on mobile device, but it lacks the optimization feature for retina displays.

[ZeshanMember]

Hi Chris,

Thank you for writing in!

For retina purpose, you can upload a high resolution image and then shrink it using CSS background-size property. So the given code will become:

@media (max-width: 979px) {
   .x-brand {
      width: 250px; /* Change WIDTH accordingly */
      height: 90px; /* Change HEIGHT accordingly */
      background: url(http://placehold.it/250×90) no-repeat center top;
      margin-top: 0;
      background-size: 250px 90px; /* Width x Height - Adjust accordingly */
   }

   .x-brand img {display: none;}
}

Replace http://placehold.it/250×90 with your secondary logo URL.

Hope this helps. 🙂

Thank you.

[Chris StovallParticipant]

This works great… but the

margin-top: 0;

has no effect at all. I would love to be able to add some space there.

[ThaiModerator]

Hi There,
Please add the !important; after margin-top: 0; like below:

margin-top: 0 !important;

Hope it helps.
Thanks

[Chris StovallParticipant]

Perfect! You guys should update that original thread?

Thanks!

[ChristopherModerator]

You are welcome.

[j_swissParticipant]

What does this mean:

Replace http://placehold.it/250×90 with your secondary logo URL.

I’m getting the css code to work as mentioned above, but what or where is the “secondary logo URL”?

Thanks

[FriechModerator]

Hi There,

The http://placehold.it/250×90 is just a dummy URL. Replace it with the actual URL of your image. You can see it on Media > Library panel then view the image and see the URL field on the left.

Hope it helps, Cheers!

[j_swissParticipant]

Thanks – Should I add the custom CSS which is now in the Custom CSS box (in customizer) to a child theme or leave it where it is. What happens when I update the theme? Will it overwrite the css that is currently in the Custom CSS panel?

[FriechModerator]

Hi There,

You can place the css code either on custom CSS or child theme style.css file. One of the purpose of child theming is to allow you to make code/styles changes that won’t be overwritten when an update is released. X Theme update doesn’t change any settings user’s defined on Customizer. So either way your custom css should be safe.

You can also export/download your customizer settings and keep it as a backup when you feel uneasy updating. To do this navigate to Addons > Customizer Manager > Download XCS File.

Hope this shed some lights, Cheers!

[Author]

Posts