Question about menu bar and date/heart buttons on mobile devices

Hello,

I have this template set up on my site, http://www.brokenjoysticks.net, and when I view it on a mobile device (or just reduce the width of firefox/edge/chrome etc to really thin), there are a few issues.

First, there is a big gap next to the menu drop down bar. How can I go about getting something to go in there that only displays when the menu is collapsed into the burger (3 lines?) Something as simple as “Main Menu” would be helpful…

Second, how can I get the date and heart button to either shrink drastically or go away entirely when the width of the page is reduced because it’s on a mobile phone? It’s cutting into all of the posts on the page, making them very hard to read and thus pretty unappealing. I tried inserting a @media check for the plove div class into the CSS but it doesn’t seem to work to disable it. I found the line in the php to delete the heart entirely but I’d like for it to still be there on desktops.

On that same regard, though, how would I go about maybe making the date and heart button a little smaller?

I’ve attached a screenshot of what I’m seeing, and the issue is easy to reproduce just by opening the site on a phone or shrinking a browser to be really thin.

Hope you can help! Thanks in advance!!