Navigation
This is archived content. Visit our new forum.
  • Author
    Posts
  • #79261

    Chris A
    Participant

    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.

    #79279

    Paula S
    Member

    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!

    #90304

    Chris A
    Participant

    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.

    #90331

    Zeshan
    Member

    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.

    #211406

    Chris Stovall
    Participant

    This works great… but the

    margin-top: 0;

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

    #211712

    Thai
    Moderator

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

    
    margin-top: 0 !important;
    

    Hope it helps.
    Thanks

    #211907

    Chris Stovall
    Participant

    Perfect! You guys should update that original thread?

    Thanks!

    #212143

    Christopher
    Moderator

    You are welcome.

    #221096

    j_swiss
    Participant

    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

    #221445

    Friech
    Moderator

    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!

    #221705

    j_swiss
    Participant

    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?

    #222005

    Friech
    Moderator

    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!