Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #203764


    I wrote you down days ago from the Comments at Themeforest, regarding an issue with the images quality when open the site in Firefox 26.0, and in all browsers my logo doesn´t resize as expected when the window narrows.

    I am note sure, but I have figured out about these issues after your latest updates. My CSS files are unaltered from the beggining.


    – Uploaded a logo in 340 px and 640 px wide, and the results are the same.

    In Firefox the logo and the resized images within the LayerSlider, etc. are pixelated in a regular display:


    But in Safari or Chrome, it is shown ok in a regular display:

    Safari and Chrome

    Anyway, when watching it in a Retina Display, everything is ok no matter the browser (here in Firefox, you´ll probably see this capture twice in size):


    Another issue is the logo doesn´t resize when changing the browser width:


    Regarding the browser width and the pixelated issue in regular displays, here is another example with out customers’ logos (in some cases the texts are unreadable):


    And finally, why when narrowing the browser some logos, images, etc. they pile up 1-2-1-2, instead of 1-1-1-1?

    If you could check my site which is in “maintenance mode” at this moment, I can give you the login in a private message.

    Thank you in advance for your help.


    Hi Pablo!

    Post the login as a private response to this topic.


    This reply has been marked as private.

    Hi again,

    I don´t know if it´s the regular behavior, but the header navigation bar doesn´t keep at the top when the page is about 980px wide or less, despite this option was previously selected: “Fixed Header With Social Icons and additional Navigation”. Could this threshold width be changed?

    PS (images in Firefox): You can also check that your Enfold demo site has the same image resize pixelated issues in Firefox:

    – Take a look to the Enfold logo when it’s resized scrolling the page:
    Enfold logo in Firefox

    – Take a look to your demo customers:
    Enfold customers logos


    • This reply was modified 1 year, 9 months ago by  Pablo.


    Following code should improve the performance of image scaling for Firefox users

    #top .logo img, #top img, #top a img{
    image-rendering: auto;

    Try to insert it into the quick css field.



    Thank you Peter,

    It works! But now in Safari when the image is resizing while scrolling the page, it is shown pixelated, although when the logo stops resizing, it renders ok. If you know any solution that works for all browsers, it would be perfect.

    But still there´s the issue when narrowing the browser window, as you can see in my captures, the top header (social icons and phone) pushes the header and the logo is hidden and the scale of the logo is bigger than expected. Trying a lot of options, I have figured out that this issue happens when you put something in Enfold > Header > “Phone Number or small info text”. Content in that field makes the logo bigger and that way it doesn´t fit into the header band. It only happens when narrowing the browser window by hand, not when the page open in a smartphone. Hope you know how to fix it.




    This is what I see when I resize the browser. The logo is beside the slide down menu. Is this fixed?



    Hi Ismael,

    As I tried to explain in my previous message, the logo issue occurs after loading the page and then you narrow the browser (from i.e. 1000px to 300px) by hand. If you load the page directly no matter the browser window width (i.e. 300px), the logo is shown ok. Maybe is a problem of the responsive framework itself.

    About the image rendering, take a look to your capture: the logo is ok but the LayerSlider is so pixelated. What browser are you using? Could you definitely check this issue, please? No matter the good theme Enfold is if the images cannot show up at their best quality in most popular browsers.

    And the last question -that no one has answer it yet, is how to change the way the images pile up in responsive from 1-2-1-2 to 1-1-1-1. Example:

    As you can see in that capture, when the window is narrow the logos appear that way 2-1-2 instead all at the same size and 1-1-1-1-1 in one column. Do you know how to change it?




    You can add this on your custom.css or Quick CSS to adjust the partner logo element on mobile view:

    @media only screen and (max-width: 767px) {
    .responsive #top .avia-smallarrow-slider .flex_column {
    margin: 0px;
    width: 100%;

    Best regards,

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.