Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 8, 2017 at 2:05 pm #789587
    lpoussard

    How on earth to I size a logo so that it appears at it’s original resolution. Even when I upload the original 2MB file, the image looks soft. If I use the browser zoom in feature, around 145% it looks great! Soooo…how can I get the theme to display the logo at it’s highest resolution no matter what.

    May 8, 2017 at 2:15 pm #789594
    Yigit

    Hey Lauren,Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    @media only screen and (min-width: 1024px) {
.container.av-logo-container {
    padding: 0;
}}

    Best regards,
    Yigit

    May 8, 2017 at 2:19 pm #789599
    lpoussard

    Thanks, I tried it but it’s still soft. any other ideas?

    Thanks Yigit!

    May 8, 2017 at 2:34 pm #789609
    Nikko

    Hi Lauren,

    I would suggest using an image resizing app or software like Adobe Photoshop to resize the image (for logo it would be 300px in width). If the image is very large and forced to scaled down with large amount, the image quality isn’t as good as the original size :(

    Best regards,
    Nikko

    May 8, 2017 at 2:36 pm #789610
    lpoussard

    Thanks Nikko, I’m not sure if you’ve looked at the site, but the client wants it larger, so a logo only 300px wide is going to took even more pixelated, isn’t it?

    May 8, 2017 at 2:57 pm #789635
    Nikko

    Hi,

    Sorry was referring to height and my mistake I misunderstood it. Try adding this css code in Quick CSS:

    .html_top_nav_header #main .av-logo-container {
    height: 500px;
}

#main .container.av-logo-container {
    max-width: 100%;
}

    Just adjust the height as you see fit. Hope this helps :)

    Best regards,
    Nikko

    May 8, 2017 at 11:28 pm #789900
    lpoussard

    Is this theme resizing everything? I am uploading very large files but the images are coming up soft and the client is super particular. is there anything I can do for this?

    May 9, 2017 at 8:01 am #790051
    Sarah

    Hi Lauren,

    I’ll chime in here if it’s okay. :)

    The theme doesn’t resize the logo, but it does display it at the dimensions that you set. But, as Nikko said, a very large image forced to be displayed as a smaller image will appear wrong. For example, right now your logo is 2471 x 743. When we see it as it is now, in a 831 x 250 space, we are not seeing it in its best form. Also, a large image takes a LOT of time to load, so it’s not good for your website, either, and should be avoided if possible.

    We suggest creating a version for those dimensions specifically for the header area.

    Here’s an article about creating the right image sizes vs. resizing through code: Why You Should Never Let Browsers Resize Your Photos.

    And here’s an article about resizing images without losing sharpness. There are a lot more about the topic in the web. :)

    Can you try creating a 831px x 250px version of the logo?

    Best regards,
    Sarah

    May 9, 2017 at 2:06 pm #790263
    lpoussard

    Thanks Sarah,

    I agree on all these points lol. Most of the sites I work on, imagery is not that important, and I resize the images so that they are significantly smaller to reduce load times. But i haven’t seen image affected so much in other themes, maybe it was just luck at the time. From the number of comments on the support theme about the resolution, I thought something else was at play.

    So, my next, and hopefully final, question on the matter is – how can I tell what size to resize all these images to?

    May 9, 2017 at 3:21 pm #790354
    Victoria

    Hi,

    As Sarah suggested, you could try a 831px x 250px version for logo.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    May 10, 2017 at 2:06 pm #791085
    lpoussard

    Hi guys,

    Thanks so much for all your help. I did change the logo size and it did make a difference on chrome, but when I look in safari it looks soft again. Just when I thought I had fixed it. I don’t know what the heck to do now. Link to site below again, and another question:

    Can you help me with one more thing, I need one layerslider to have a different height when the site is viewed on mobile. the designer chose a very delicate font that I need to create a rule for to enlarge on mobile. when I do that the bottom text gets cut off as it tries to conform to the dimensions of the layerslider. I made a rule for p.ls-layer to enlargen the font when you get down to a mobile device which works super on my iphone, except the bottom couple of lines got cut off. I then modified the slider to be taller, which works on desktop and not on screen. If you follow the link you see how silly that space looks between the layer and the next row looks. I want to create a rule that either makes the layer slider larger for mobile or smaller for desktops…. well, CAN I create such a rule. thanks for your help.

    May 11, 2017 at 6:11 pm #791798
    Andy

    Thanks so much for all your help. I did change the logo size and it did make a difference on chrome, but when I look in safari it looks soft again. Just when I thought I had fixed it. I don’t know what the heck to do now. Link to site below again, and another question:

    Make sure to clear browser cache of Safari and hard refresh a few times.

    For the other issue: can you provide us screenshots of the issue please? use imgur.com or Dropbox.

    Best regards,
    Andy

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.