Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • December 24, 2013 at 4:30 am #203444
    npozero

    Hi all,

    I inherited a website that was designed with Enfold and am having some issues with how images are displayed in the menu and resulting layout page in both IE and FF but they look proper in Chrome. As far as the client knows, it has always been a problem. I’m using WordPress version 3.8 and just updated Enfold to version 2.5.

    Here are some example images. In Chrome, when I mouse over the “seating” menu:

    Chrome Mouseover

    In Chrome, when I click on “seating” to view the full page of seating options:

    Chrome Clickthru

    Now in IE and FF, mouse over seating:

    IE&FF Mouseover

    The images are all different sizes and they don’t all fit in the frame.

    After clicking on “seating” in IE and FF:

    IE&FF Clickthru

    Images go well off the right side of window, no scrolling options given.

    I’ve looked at the properties of the images that were uploaded, they appear to be much smaller than what IE and FF display them as.

    Thanks in advance for any help!

    December 28, 2013 at 11:51 am #203630
    Dude

    Hi npozero!

    Please post a link to the website (you can post it as private reply if you want to avoid that other users can use it to visit your website).

    Regards,
    Peter

    December 30, 2013 at 5:02 pm #203759
    npozero
    This reply has been marked as private.
    December 31, 2013 at 11:34 am #204010
    Dude

    Hey!

    Please try to insert following code into the quick css field to fix the issue

    

#top #header .avia_mega_div > .sub-menu > li.avia_mega_menu_columns_4{
width: 250px;
}

    Best regards,
    Peter

    December 31, 2013 at 5:11 pm #204078
    npozero
    This reply has been marked as private.
    January 2, 2014 at 4:01 am #204372
    Ismael

    Hi!

    Please try to add this at the very bottom of custom.css or Quick CSS:

    #top #header .avia_mega_div > .sub-menu > li > ul > li a {
width: 100%;
max-width: 250px;
}

    Regards,
    Ismael

    January 2, 2014 at 4:53 am #204391
    npozero
    This reply has been marked as private.
    January 2, 2014 at 4:57 am #204396
    Ismael

    Hi!

    Please try this to fix the avia table:

    div .avia-table img {
width: 100% !important;
max-width: 100% !important;
}

    Regards,
    Ismael

    January 2, 2014 at 5:03 am #204398
    npozero
    This reply has been marked as private.
    January 2, 2014 at 5:08 am #204400
    Ismael

    Hi!

    Please try this instead. The code above works on my end.

    .avia-center-col a img, .avia-table a img {
width: 100% !important;
max-width: 100% !important;
}

    This is what I see on Firefox:

    Best regards,
    Ismael

    January 2, 2014 at 5:33 am #204407
    npozero
    This reply has been marked as private.
    January 2, 2014 at 5:38 am #204410
    Ismael

    Hey!

    Glad it is fixed. :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Image resize problem in IE and FF, Chrome looks fine’ is closed to new replies.