How can I resize and position images in a mega menu?

[Sandra80]

Hi,

Im using the theme “Be Yours” and setting up a mega menu with images.

All images is the same size 500x500, but in the mega menu they seem to adapt to the length of the subtitle, and they are also cut into landscape pictures.

Is there a way that I can make all images the same size and squared?

Also is it possible to position the subtitles above the images?

[saurav9005]

can you provide the website url

[GemPages]

Hello @Sandra80

Can you give me your page URL( with pass if your store password is enabled) , so I can check it and maybe give you a solution?

Kind & Best regards,
GemPages Support Team

[BSS-Commerce]

Hi @Sandra80

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[Sandra80]

The store url is https://lafleur.ae/

[GemPages]

Hi @Sandra80

You can try adding code by following these steps:

1. Go to Online Store → Theme → Edit code. https://prnt.sc/elKuwYWlBrEo

2. Open your base.css in the Assets folder.

3. Paste the below code at the end of the file. https://prnt.sc/14_h5BYLtL4o

.list-mega-menu .mega-menu__item-link .media{
    width: 100%;
    aspect-ratio: 3 / 3;
  }
.list-mega-menu .mega-menu__item {
    max-width: 18% !important;
    width: 18% !important;
    flex: unset !important;
    min-width: 18rem;
}
.list-mega-menu .mega-menu__item-link{
    display: flex !important;
    flex-direction: column-reverse;
    height: 100%
}
.list-mega-menu .mega-menu__item-link .header__menu-item{
   flex-grow: 1;
   text-align: center;
}

I hope my solution can work and support for you.

Best regards,
GemPages Support Team

[Sandra80]

Thank you, that definitely looks better, however any idea why the images are cropped? The original images are squared, and now they are cropped as landscape?