Anchor scroll position, relative to filterbutton div height

[Nzagamba]

Situation (here is my website draft):

• I have 12+ filter buttons, position fixed on top of the website.
• the buttons have anchor links that scroll to a certain area.

Problem:

• Depending on the screen width, the div, holding the buttons has a different height, breaking into 2, 3, or 4 lines, which makes the div height increase, on smaller screens. This is a problem, because the anchor scroll position should be relative to the div height holding the buttons, it should always scroll to the bottom edge of the div holding the buttons. Now the anchor links scrolls underneath the buttons on small screens. I put a padding-top 200px on the content div, but this only works for wide screens, not when the buttons break in to 3 or 4 lines, on smaller screens.

Any suggestions or tipps on how I can solve this? I'm happy to get some help on this. Many thanks in advance!

[Nzagamba]

I also have a second issue, with the same filterbutton-menu from above. In mobile I used css and js to collapse the menu. For some reason, on iphone safari, once I click on one of the filter buttons, the bottom area suddenly covers in white. I spent hours with ChatGPT, trying to find the bug, but couldn't find a solution. So, here I am, I need some human help with this? :-) Could anyone look into it? Bellow images showing the correct screenshot on the left and the bug version on the right (once clicked on a filter button.

[arminunruh]

1.:

you could use a textformat for the buttons that uses a % based font size, namely vw:

in textformats, click this and vw will appear. this will make the font size scale with the browser width

2.:

second issue is some new thing with the ios safari, nothing that can be done here as far as i know! found nothing online