Streaming live at 10am (PST)

Responsive States


#1

Hi @Waldo!

I need help with aligning my menu items (all menu pages) to be readable and organized in the mobile state. How do I fix that so it's accessible to viewers? Currently, it's all mixed up and scattered across the page making it extremely illegible.

Here is my public share link:
https://preview.webflow.com/preview/qings-cuisine?preview=3d05ebe9e2fe6e6d6be5f7d4c8886e0f

Thanks in advance!


#2

Removing the Left and Right Padding on "Column Items" helps a lot on the Thai menu page for Mobile Landscape.

The tricky part here is on the Mobile Portrait breakpoint. Some of the menu items get word-wrapped to two lines, which throws off the alignment of all the other columns.

I've only tested this on the Appetizers section of the Thai menu, but the best way I've found to fix this should be something like this:

  • Set "Column Items" to the Custom Grid setting & remove it's padding.
  • Set "Hot Veg GF Column" to Display: Block with a custom Sizing setting of 0 0 50px
    • Set "Group Hot Veg GF" to have a Top Margin of 10px
    • Set "Veg GF", "GF" and "spicy" to a Top and Bottom Margin of 0px, give it a Top Padding of 10px, a Bottom Padding of 35px and a height of 25px
    • Set "Spicy GF" to a Top and Bottom Margin of 0px and give it a Top Padding of 10px and a Bottom Padding of 15px
  • Set "Code Column" to Display: Block with a custom Sizing setting of 0 0 20px and Position: Relative and Left
  • Set "Dish Column" to Display: Block with a custom Sizing setting of 0 0 195px and Position: Relative and Left
  • Set "Price Column" to Display: Block with a custom Sizing setting of 0 0 35px, remove it's Left and Right Padding and set it to Positon: Relative and Left
    • Set "Cost" to a Top and Bottom Margin of 0px and give it a Top Padding of 10px and a Bottom Padding of 10px

It should get things pretty close, though it may not be as flexible and I'm sure there's a lot of room for improvement here too.


#3

Hi, thanks so much. However, it's a little confusing. Could you clarify with a screenshot of your settings? When you write something like:

"Set "Hot Veg GF Column" to Display: Block with a custom Sizing setting of 0 0 50px"

I'm not sure where to input the '0' '0' and '50px'.

Also, would this work for mobile portrait?


#4

You'll put those values in the 'Sizing' control area as seen here (you'll have to have followed the other steps, setting it to Display: Block & Position to Relative before you're able to access this setting):

Yep! The big list of changes is meant to make the menu look good on Mobile Portrait.

On Mobile Landscape, the menu looks fine after you remove the Right and Left padding on "Column Items". :slight_smile:


#5

Hey, thanks so much. However, I do notice for Mobile Portrait that the code column no longer exists after Appetizers and after Vermicelli Noodles, it becomes disorganized again.

In addition, the symbols don't line up with where they're supposed to.

How do I resolve this?


#6

Hi,

There are still a lot of issues with the responsive states for the listed menu items, can you please respond so I can move forward with this project? Thanks in advance :slight_smile:


#7

Hey, KLTRON

Sorry about that. Things have been a bit busy over here. I'm gonna try and make some time tomorrow to advise further.

Last I checked, following all the steps above should make it look good on Mobile Portrait, but I'll re-run through the steps myself to make sure.


#8

Fixes for Mobile Landscape given your current settings.

  • Set "Hot Veg GF Column" to Align: Stretch
    • Set "None" to a height 25px
    • Set "Veg GF", "GF", "Spicy", "Spicy GF" to have a Top Margin of 0, a Bottom Margin of 10 a Top and Bottom Padding of 10 and a Height of 25px
  • Set "Cost" to have a Top Margin of 0, Bottom Margin of 10, Top and Bottom Padding of 10 and Height of 25px

  • Set "None" to have a Top and Bottom Margin of 10 and a Height of 25px

Mobile Portrait may now look misaligned, but it's hard to say completely as I believe you have different settings on some elements from what I've suggested above. At this point, it may be better to clear Mobile specific styles and start from scratch. If needed, I would be available for hire to consult more in-depth on this, as there's a lot to account for and it can be hard to really get into it over the forum.


#9

Hey,

Thank you so much. I'm not sure when and how the responsive states all ended up having different settings but I think you're right about starting from scratch. What's the most efficient way to clear all the style settings? (I'm asking to take extra precaution so I don't end up deleting something crucial to the whole design).

Thank you :slight_smile:


#10

I believe for each non-Desktop breakpoint, you'll want to select the various elements and find the settings that are blue and underlined. Click the name and you'll have the option to "Remove this style" -- which would revert any changes made for that specific breakpoint. I'm not aware of any way to mass clear changed styles. Maybe @PixelGeek or another staff member may be able to provide a better way?


#11

Hi!

I cleared all the display settings on the Thai, mobile landscape, and followed your steps again. It looks beautifully aligned on the landscape aspect but not so much portrait. How do I fix the overlapping on mobile portrait? Thanks in advance! x


#12

oh, just noticed mobile portrait for the lunch menu is overlapped as well. Could you also take a look at it? it's a different format than the thai menu. might be easier to resolve?


#13

For Thai On Mobile Portrait:

  • On "Column Items" remove the Left and Right Padding (set it to 0).
  • On "Group Hot Veg GF" remove Top Margin (set to 0), Display Setting to "Flex", Flex Layout to "Direction: Column", "Align: Start" and "Justify: Start"
  • On "Veg GF", "GF", "spicy", "Spicy GF" Top Margin to 10, remove Top and Bottom Padding (set to 0).
  • On "Code Column" remove the Left Padding, Set Position to "Relative", Remove Right Position (set to 0).
  • On "Group Column" under Direction: Column, set "Justify: Start"
  • On "Dish Column" set Position "Relative"
  • On "Group Dishs" set Flex Child Settings - Align to "Stretch"
  • On "Price Column" set Position to "Relative"
  • On "Group Price" set Display Settings to "Flex", then Flex Layout to "Direction: Column" and "Align: Center" and "Justify: Start"
  • On "Cost" add 10px Top Margin, remove Top and Bottom Padding.

I'll take a look at the Lunch menu a little later.


#14

Hey, thanks so much. I followed your steps exactly and i'm not sure why it turned out this way?


#15

Looks like there are two adjustments that were missed.

"Code Column" needs it's Left Padding removed. "Dish Column" needs Position set to "Relative". Also, don't forget to apply the padding changes to "Spicy GF".

That should fix it:


#16

Hey, thanks! I followed through for the other steps I missed but the one step that still confuses me is the left padding removal for Code Column. It was 0 to begin with so I'm slightly confused.


#17

Apologies, it's supposed to be the Right padding (the one that says 182 in the screenshot).


#18

Hey, how would I go about fixing the width of this column to prevent the names taking up two lines? It's causing the codes to not match up.


#19

There's no easy way to fix that, that I'm aware of, aside from making the names shorter.

Any other way to solve it would require changing the structure of the lists and/or how the information is handled.


#20

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.