-
AuthorPosts
-
August 6, 2014 at 6:34 pm #79261
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.August 6, 2014 at 6:50 pm #79279Hi 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!
August 22, 2014 at 1:04 pm #90304I 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.
August 22, 2014 at 1:45 pm #90331Hi 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.
February 20, 2015 at 4:51 pm #211406This works great… but the
margin-top: 0;
has no effect at all. I would love to be able to add some space there.
February 21, 2015 at 7:13 am #211712Hi There,
Please add the !important; after margin-top: 0; like below:margin-top: 0 !important;
Hope it helps.
ThanksFebruary 21, 2015 at 3:53 pm #211907Perfect! You guys should update that original thread?
Thanks!
February 22, 2015 at 4:43 am #212143You are welcome.
March 5, 2015 at 1:01 pm #221096What 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
March 5, 2015 at 10:11 pm #221445Hi 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!
March 6, 2015 at 10:00 am #221705Thanks – 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?
March 6, 2015 at 9:02 pm #222005Hi 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!
-
AuthorPosts