blurry header logo

  • hi guys,

    theme: unik from tesla themes

    website: https://www.010productions.com/wordpress/

    i have uploaded a new header logo to my website, and now it seems to appear very blurry on pc and (especially on) mobile devices.

    i have tried re-sizing, saving in different file formats png-8, png-24 high res with transparency etc. i have also tried to copy over the header.php from parent over to the unik child theme directory via ftp and trying to look on the editor to see if it is something to do with automatic rescaling via the theme but it isn’t obvious at all where i would change the css code.

    any ideas why it is blurry no matter what i seem to do?

    note: i am using the same logo for the revolutions slider and as you can see this shows nice and crisp.

    many thanks

    james

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi James,

    can you please share some screenshots when your logo is being displayed blurry? I am on a PC but logo image seems to be fine.

    Thread Starter jgeer55

    (@jgeer55)

    Here you go ??

    Especially blurry on mobile viewing!

    https://tinypic.com/r/2iu8eg7/9

    Looking at your logo, it seems like the image itself is quite small: https://www.010productions.com/wordpress/wp-content/uploads/2016/08/Naked-010-Logo-2.png

    Try adding a higher resolution image. If image is fine for you on desktop and you only have issue in mobile then use higher resolution image on mobile view only.

    Thread Starter jgeer55

    (@jgeer55)

    Hi a2hostinglk,

    Thanks for your messages. I found that I had to make the image quite small, as by default this theme displays at the images full size and there is no options anywhere to choose how big to display the header image.

    I have tried looking in the header.php file in the UNiK theme and doesn’t seem obvious at all where I would change this setting. This is all I can see:

    <!doctype html>
<html <?php language_attributes(); ?> class="no-js">
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>">
        <!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
        <?php wp_head(); ?>
    </head>
<body <?php body_class(); ?> data-preloader="on">
    <!--[if lt IE 9]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <div id="home" class="main-container" data-smooth-scroll="on">
        <?php do_action('tt_page_meta'); ?>
        <?php do_action('tt_theme_header'); ?>

    Any ideas how I might fix the size at which it displays?

    Many thanks for your patience ??

    James

    Hi James,

    I looked into your website and you can simply upload a higher resolution logo for your site and control the dimensions via CSS.

    The <img> for your logo is under this:

    <figure class="identity">

    You can control the behavior from your stylesheet::

    https://www.010productions.com/wordpress/wp-content/themes/unik/css/screen.css?ver=4.6

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘blurry header logo’ is closed to new replies.