Site Logo Image Size / Quality

  • Resolved chrislowthian

    (@chrislowthian)


    8 years, 10 months ago

    This is quite hard to explain but will do my best.

    I am trying to may all the images on the site Retina ready for devices like iPads etc. I am using a plugin which manages this for me called “WP Retina 2x” it automatically uses a 2x image size on Retina Devices by creating multiple sizes of an image when uploaded.

    The problem is I cannot do this with the site logo as there is no option to specify the image size to be displayed when selecting the image from the upload screen. I need to upload a big file but display it smaller so it will look sharp on all devices.

    The display size for images seems to be available in most other areas of wordpress, is there any way to enable it for the site logo by editing the functions file or anything?

    The theme looks sharp on all devices but is currently let down by the site logo on retina devices.

    Any help or suggestions would be great.

    Many Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Hey Chris,

    I understand what you mean. Try adding this CSS:

    .logo {
  max-width: 500px;
}

    That is going to restrict the image to 500px wide which is a value I just made up, so you’ll want to customize this to your logo.

    What’s going to happen is that the logo will now be kept at a normal size when the 2x retina image is loaded.

    Thread Starter chrislowthian

    (@chrislowthian)

    Thanks added the code but now on mobile it don’t resize to fit the screen:

    https://s31.postimg.org/i0x3n5k3f/image.png

    Any ideas? Thanks in Advance!

    Theme Author Ben Sibley

    (@bensibley)

    Okay I see, lets try a different approach.

    .logo {
  width: 500px
  height: 200px;
  max-width: 100%;
}

    This CSS will let you define a precise width and height that match the dimensions of your logo. The max-width property will then keep the logo at a maximum of 100% of the space available. This way, it will be sized correctly at most sizes, and scaled down properly on mobile devices.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Site Logo Image Size / Quality’ is closed to new replies.