Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #163569
    Josiahmann
    Participant

    I have built this site and tested it on firefox, chrome, and safari on my mac and it looks fine. My client is seeing a distorted logo – she is using chrome on a mac as well.

    Here is what the client is seeing in her browser – specifically the logo “creative types consulting” logo on the top left.

    Here is the site I’m testing on.

    Any thoughts?

    #163586
    Paulie_D
    Moderator

    Sounds machine specific….unless someone can replicate it’s going to be hard to help.

    #163621
    Senff
    Participant

    Look into this part (the media query for retina screens):

    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
        only screen and (-moz-min-device-pixel-ratio: 1.5),
        only screen and (-o-min-device-pixel-ratio: 3/2),
        only screen and (min-device-pixel-ratio: 1.5) {
    
        .header-image .site-header .wrap {
            background: url(images/logo_2x.jpg) no-repeat left;
            background-size: 320px 164px;
        }
    
    }
    

    The image you’re using for the background is 800×156, but you’re sizing it into 320×164. As a result, it will be stretched vertically because you’re setting a different aspect ratio. Either use background-size: 320px auto; or background-size:320px 62px;. Or different dimensions altogether, but make sure the aspect ratio is correct (if you don’t use “auto” for the height).

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.