Restaurant Menu: Mobile Layout Issue

Ask the Community Customization
1

  • Issue description:
    On mobile, the layout causes the menu descriptions, especially those with bullet points, to be difficult to read. For mobile only: Could we possibly make the image section smaller and the description section larger? Also, can we remove the indent on the bullet points to enhance readability?

  • Link to the page with the widget in question:
    Temple City — The Dive Oyster Bar
    Food → Entrees

    Screenshot-2024-08-30-at-10.34.41-AM
    Screenshot-2024-08-30-at-10.34.41-AM846×1576 164 KB

1 Like
3

Hi there and welcome to the Community, @Sebin_Sohn :wave:

I’ve relayed your request to the devs. Currently, they are out of the office, so I’ll get back to you on Monday :slightly_smiling_face:

1 Like
4

Hi @Sebin_Sohn :wave:

Thank you for waiting!

Here is the solution from our devs:

.global-styles,
[class*="Description__DescriptionComponent-sc-"] ul,
[class*="Popup__Description-sc-"] ul {
  padding: 0;
  padding-left: 1em;
}

@media(max-width: 600px) {
  [class*="RestaurantMenu__Component-sc-"]
  [class*="Image__ImageComponentContainer-sc-"] {
    width: 50px;
    height: 50px;
  }
  
  [class*="RestaurantMenu__Component-sc-"] {
    padding: 0;
  }
}

Add this code to the Custom CSS field on the Style tab of your widget’s settings and let me know if you like the result :slightly_smiling_face:

5

This works perfectly. Thank you very much! :grinning:

2 Likes
6

Great! You are most welcome :wink: