Shorten height of restaurant menu block on mobile

Site URL: https://smallsisgood.com/menu-copy

Trying to implement the menu block for a restaurant and it works great, except on mobile the height is always as tall as the longest section of the menu (drinks) which results in a lot of blank space when viewing other sections (grab & go, salads, sandwiches, etc.). Is there a way to tighten up the height to show only what is needed for the section being viewed?

smallsisgood.com/menu

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-62cf28615a9fcf882af7a442 {
    height: auto !important;
}
}

On 8/13/2022 at 10:13 PM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-62cf28615a9fcf882af7a442 {
    height: auto !important;
}
}

 

Thanks @tuanphan! That doesn't seem to do it, though. The page still defaults to the length needed for the menu section that is the longest, regardless of which section you're viewing. Any other ideas?

On 8/11/2022 at 10:16 PM, melmotz said:

Site URL: https://smallsisgood.com/menu-copy

Trying to implement the menu block for a restaurant and it works great, except on mobile the height is always as tall as the longest section of the menu (drinks) which results in a lot of blank space when viewing other sections (grab & go, salads, sandwiches, etc.). Is there a way to tighten up the height to show only what is needed for the section being viewed?

smallsisgood.com/menu-copy 

The url doesn't work. Can you check it again?

@tuanphan oops, it is now at smallsisgood.com/menu

On 8/18/2022 at 12:47 AM, melmotz said:

Thanks @tuanphan! That doesn't seem to do it, though. The page still defaults to the length needed for the menu section that is the longest, regardless of which section you're viewing. Any other ideas?

It worked here. Can you check it again?

@tuanphan, on mobile the white box is the correct size, but the page has blank space equal to the height of the longest section of the menu (which is Drinks). So on all other menus there is tons of blank space beneath the menu. Does that make sense?

On 8/11/2022 at 10:16 PM, melmotz said:

Site URL: https://smallsisgood.com/menu-copy

Trying to implement the menu block for a restaurant and it works great, except on mobile the height is always as tall as the longest section of the menu (drinks) which results in a lot of blank space when viewing other sections (grab & go, salads, sandwiches, etc.). Is there a way to tighten up the height to show only what is needed for the section being viewed?

smallsisgood.com/menu-copy 

The page url doesn't work now

@tuanphan it should work now at smallsisgood.com/menu

On 9/2/2022 at 1:22 AM, melmotz said:

@tuanphan it should work now at smallsisgood.com/menu

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
.fe-62cf286108eb94027ab3a593 {
    grid-template-rows: repeat(15,minmax(24px, auto)) !important;
}
}

On 9/3/2022 at 8:00 AM, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
.fe-62cf286108eb94027ab3a593 {
    grid-template-rows: repeat(15,minmax(24px, auto)) !important;
}
}

 

@tuanphan Hm still doesn't seem to work!

14 hours ago, melmotz said:

 

@tuanphan Hm still doesn't seem to work!

If it still doesn't work, I have no idea to solve this.