Restaurant Menu: Mobile Layout Issue

[Sebin_Sohn]

• 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
  

  

[Max]

Hi there and welcome to the Community, @Sebin_Sohn

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

[Max]

Hi @Sebin_Sohn

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

[Sebin_Sohn]

This works perfectly. Thank you very much!

[Max]

Great! You are most welcome