Blurry logo on tablet and mobile devices

Hi all!

I’m having a bit of an annyoing problem. On tablets and mobile devices, my logo in the header and footer sections gets blurry. On desktop it’s displaying fine. All suggestions on how to solve this is appreciated. The theme in question is Braxton.

  • Nastia
    • Support Rock Star

    Hello cloudinnovates

    I hope you are doing well today!

    I am not familiar with the Braxton theme. I’ve checked the site that you have registered with us, the logo looks very well for mobile devices. If this is not the site you have this issue on, please post the link here.

    Also , please contact with the Braxton theme support team. I am sure they will be able to assist you, since it is their theme.

    I hope this helps!

    Cheers,

    Nastia

  • David
    • Design Lord, Child of Thor

    Hi Nastia!

    No it’s that site. Unfortunately it looks bad on both my Ipad Air and Huawei. I will reach out to the developer of the team if noone here can help me solve this. Not to keen on paying the ridicilous support fee that they have though.

  • Sajid
    • DEV MAN’s Sidekick

    Hi David,

    Hope you are doing good today :slight_smile:

    It appears you have put your website on maintenance mode. I can only see one logo with blank background and nothing else.

    I am also not familiar with Braxton theme but I think there must be an option to use a different log image for retina devices. So make sure you check if there is any setting in theme options for this. If yes then add a new image with bigger resolution (ideally it should be double the size of normal screen for retina devices).

    Take care and have a nice day :slight_smile:

    Best Regards,

    Sajid

  • David
    • Design Lord, Child of Thor

    Thanks for your response Sajid. You were right! There was an option to use different images for retina display altough it wasn’t pssoible to set this in the admin panel. Thought i’d share the solution if another user with the same theme encounter this issue:

    1. Just as Sajid said create a duplicate of your original logo BUT with twice the size, meaning if you original logo is 250×50 then the new logo must be 500×100.

    2. Add @2x at the end of the name of the new logo. (If your original logo is named logo.png then name this logo@2x.png)

    3. Locate the folder where the original logo is uploaded.

    4. Upload the new logo (without deleteing the original logo) into this folder.

    5. Thats it! Now you have a logo that looks amazing on retina devices.

  • Sajid
    • DEV MAN’s Sidekick

    Hi David ,

    Hope you are doing good today :slight_smile:

    I am glad to know it helped resolved your issue and thank you so much for sharing the exact steps. I am sure it will help other community members too (even if they are not using this theme). For your community effort, I am sending you some hero points as a way of appreciation.

    Thanks a lot and have a fantastic day :slight_smile:

    Best Regards,

    Sajid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.