Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 22, 2022 at 10:06 pm #1362431
    Eleina_Shinn

    Hi: on this site my images are all of the same size in the backend – 640 x 360px – and this has come up before and I’ve tried the same CSS you’ve supplied that fixed another site, but it didn’t fix this one. Here’s what you’ll notice in the mega menu under “Work With Vickie” – the two outermost images are slightly larger than the two images in the middle and I would love for them to all be the same.

    Here is the site: http://eleinar9.sg-host.com/

    Everything I try seems to make the images much smaller, too much padding, can’t seem to get it right. – Your help is greatly appreciated!

    August 23, 2022 at 2:52 am #1362449
    Ismael

    Hey Eleina,

    Thank you for the inquiry.

    The size of the image in the 3rd column (people) is 2560x1440px, a bit larger than the images in the other columns (640x360px). Please make sure that the size of the images in the columns are the same.

    Best regards,
    Ismael

    August 23, 2022 at 2:19 pm #1362508
    Eleina_Shinn

    Hi Ishmael, sorry about that, thought I had already scaled it down. Now it is, but the same problem remains.

    August 23, 2022 at 10:17 pm #1362570
    Guenni007

    try this in your quick css :

    #top #header .avia_mega_div > .sub-menu {
    display: flex !important;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    margin: 0 !important;
    padding: 0 !important;
}

#top #header .avia_mega_div > .sub-menu > li {
    flex: 0 1 22%;
    padding: 2% 0 !important;
}
    August 24, 2022 at 5:13 am #1362586
    Ismael

    Hi,

    Thank you for the update.

    Looks like the images of the first and last column are larger because of the difference in padding. Adding this code should decrease the size of the images in the last and first columns.

    #top #header .avia_mega_div > .sub-menu > li:first-child, #top #header .avia_mega_div > .sub-menu > li:last-child {
    padding-left: 14px;
    padding-right: 14px;
}


    @Guenni007    : I tried adding your css code but it breaks the layout of the mega menu, not sure why.

    Best regards,
    Ismael

    August 24, 2022 at 8:37 am #1362599
    Guenni007

    Did you test it on that live Site? Because all my desktop Browsers ( Chrome, Safari, Firefox Developer, Opera ) will do the job in developer tools.
    Even if i let shrink the browser window just before hamburger is active:

    August 24, 2022 at 9:34 pm #1362693
    Eleina_Shinn

    I think this worked great, I so appreciate your help. Thank you Thank you both!

    August 25, 2022 at 9:10 am #1362732
    Ismael

    Hi,

    Glad to know that this has been sorted out. Please feel free to open another thread if you have more questions about the theme.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Mega Menu – Make all Images same Size’ is closed to new replies.