Hi Maxwell,
Probably the best way to do this is to use your own CSS to layout the menu. You can dequeue the plugin’s CSS code by going to Menus > Settings and setting the Style option “Don’t load any CSS styles”.
Then you can open up /wp-content/plugins/food-and-drink-menu/assets/css/base.css and copy all of the styles into your own stylesheet. From there, you can modify the breakpoints in your css code, so that the columns collapse wherever you’d like.
Hi Nate, I had a go at that but got on better by editing your css
One problem
Can you send me the css to stop the price from wrapping on a samsung phone
I have it working ok on the iphone but can not stop the price going onto a second line
Menu Page
Hi maxwellmill,
Just FYI, if you edit the plugin’s CSS file, all of your changes will be obliterated the next time you update the plugin.
I don’t really see any breakpoints on your site where the price goes to a second line. If you can tell me an exact screen width and point out the price that jumps to a second line there, I’ll take another look and see if I can reproduce it.
Hi Nate, thanks for the reply
Late last night I fixed the problem by taking out MY own CSS!! that was causing the problem as was showing the client.
Problem is fixed for now!!
I had a go at getting 2 columns in landscape on a iphone 6
I will do as you suggested with the CSS move on attempt 2
When I recreated your file in my custom CSS it did not format as I expected, maybe the theme interferes
One thing do you think 2 columns on an iPhone 6 in landscape will work??
Cheers for now
Maxwell
Hi Maxwell,
Your browser doesn’t know an iPhone 6 from an Xperia Z. It only knows screen width. It looks like the iPhone 6 shows 559px in landscape mode. So you just need to update the media query to break from one columns to two before that.
So this:
@media (max-width: 991px) {
Could be:
@media (max-width: 500px) {
To be honest, I think it will be pretty tight. But you can always try and judge for yourself.
