Make Restaurant Menu image full width

Ask the Community Customization
1

Hello! Is there a way to make an image go the full width and be stacked on top of the item title and description?

Screenshot 2026-06-13 at 3.02.27 PM
Screenshot 2026-06-13 at 3.02.27 PM950×648 108 KB

3

Hi there, @Lily_Gamble :waving_hand:

The 3rd Item Layout should be just what you need:

image
image331×504 9.68 KB


Please give it a try and let me know how it worked for you :slightly_smiling_face:

4

Thank you for the response! I prefer the second item layout where the text is left-aligned and the price is on the same line as the item title. Is it possible to keep those aspects and move the image above the item?

5

Got you! This CSS code will do the trick:


  [class*='ItemLayoutTwo__Component-sc'] {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  [class*='Image__ImageComponentContainer-sc'] {
    width: 100%;
    height: 100%;
  }

  [class*='Image__ImageComponent-sc'] {
    object-fit: contain;
  }

I’ve also noticed that a closing } is missing for your mobile CSS code:

image
image333×336 17.5 KB

Please add a 2nd closing } to your mobile CSS code, so that the CSS code for the image display would work correctly :slightly_smiling_face:

6

That worked perfectly. Thank you!

7

You’re very welcome!

In the meantime, we’d like to invite you to join our Birthday Contest, where you could win 6 FREE Months for your subscription.

Check the details and join in: Birthday Contest: 10 Winners, 5 Free Years with Elfsight! 🎁