What is best way to accomplish this

[larryk]

I’m trying to reformat a text menu, that is currently an image.

I can make it look good, but then when on mobile, the responsiveness tends to change the format.
So looking on advice what is the ‘best’ way to accomplish the formatting so it looks good/the same on any device.

[ruenel]

Hello There,

Thanks for writing in! By default, the page has two separate menus. The desktop and the mobile. This is necessary because in smaller screens, your desktop menu will not have enough space to display all the menu items. The mobile menu is necessary so that the menu items will be displayed properly and that it is readable.

To better assist you with this cosmetic change, please give use an example of what style do you want to have so that we can also format the mobile menu to make it at least a look alike of the desktop.

Please let us know how it goes.

[larryk]

thanks… BUT
I didn’t mean the “nav menu”…
the page I sent in the secure text had the 2 pages I was referring too

a) the food menu image
b) i’m converting that food menu image into text, etc.

so what is the best way to do that?
thanks!

[christian]

Hey Larry,

What you’re trying to achieve would require custom HTML structure which you will then need to add in a Raw Content element. For the menu styles like backgrounds of certain parts and the dash line, it would require custom CSS. Once you’re finished with the structure, we can help you with some minor CSS changes.

Please take a look at the menu page of our Restaurant demo. The price structure is using custom HTML with the help of helper classes.

I’d recommend that you import the Restaurant demo to your site or staging site to study and copy its structure.

Thanks.

[larryk]

THANKS!!!

the demo got me exactly what I needed

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.

[larryk]

I spoke too soon…

if you see the above link , the /menu/ page…

when on small screen, i narrow the browser as far as it will go…
the prices do some odd things??? one disappears?

I’m not sure what or why that is happening?
Its set up very similar to the the demo?

do you see what I’m missing?
or how to fix it?

thanks

[larryk]

odd… i just check the menu page on my cell and it works fine.
but when shrinking browser window, the prices mess up???

[Joao]

Hi There,

Prices are looking good on my end on smaller browser or mobile.

Can you provide a screenshot to clarify if necessary?

Thanks

[larryk]

[larryk]

so all looks great, EXCEPT when you resize a desktop browser to be smaller… do you see the price gets “moved” into odd places somehow?

[ruenel]

Hey There,

That is because there isn’t enough space to display and the resized browser will try to display the contents as nice as it could possibly be displayed. Resizing the browsing may not resembles the actual screen size because as the page is loading, the elements will responds to its positions and alignments unlike the resizing of the browsing where in the element cannot have time to initialize. It will just adjust itself because it is already there displaying.

For best results, you can make use of the table tag so that your content will always display in left right layout.

<table>
  <tr>
    <td> 1 Meat Sandwich </td>
    <td style="text-align: right;">$7.00</td>
  </tr>
  <tr>
    <td> 2 Meat Sandwich </td>
    <td style="text-align: right;">$9.00</td>
  </tr>
</table>

If there are borders and extra spaces around we can adjust that later on.

Hope this helps.