Size of area changes incorrectly

Happy New Year! On my site, there is a link “2019 Schedule”. If I click on the first button “TOWN SQUARE”, then click on the button below that, “Roseville Theatre”, the size of the section changes, and the section below moves up a few points. I’m guessing this a % or min/max setting, but I cannot figure it out. Thanks for anyone’s help in advance! (FYI, I haven’t started to adjust the iphone layout yet…it’s still a huge mess. Anyone for hire?)

https://preview.webflow.com/preview/roseville-jazz-fest?utm_source=roseville-jazz-fest&preview=c2592367012726de3ded67d61cabe918

Hi. Looks like it’s to do with your ‘drinks tab pane’ and the menu items being of variable height. Maybe try giving a min/max height to drinks tab element.

1 Like

Thanks, Will. I set each element to a max of 75. Didn’t seem to work. So, I set the entire section height to 700. It worked, however, I think that’s not the correct way to do it. Isn’t forcing a specific height a poor choice, since every browser and font is different?

I don’t think there is anything wrong with min/max height/width when used correctly. For example, if the element contains a dynamic list it may not want to have a fixed height as it will need to grow, however, setting a min-height might help that element retain proportions in context to the rest of the design. An alternative approach might be to limit the number of results or CMS values (e.g. characters, etc.) in order to take control over proportions of dynamic content. Hope that’s of some help - I am sure there are plenty of other opinions on this though. Good luck.