Tweaks to mobile interface

Hello,

I’d like to make a couple of tweaks to the way my site appears on mobile devices:

1. I have a sidebar that includes two key widgets: A “Search” option and a “Sign up for Email Alerts” field. Currently, these widgets are not visible on the mobile interface. Is there any way to get them to show up so that users can search/sign up for alerts while accessing my site on their phones? (Note: The site also has a handful of menus running across the top; on mobile, these aren’t immediately visible, but there’s a button with horizontal lines on the top, and if you click that, the menus pop open.)

2. I attempted to vary the appearance based on screen size. But the for iPhone 5 and other narrow devices, the site title (“MovieManifesto”) gets wrapped onto two lines, like this:

MovieManife
sto

Also, even though Chrome’s developer tools indicate that everything looks fine for users with iPhone 6/7/8, a friend with an iPhone 7 told me that similar text wrapping is occurring on his phone. Is there any way I can fix this?

For reference, here is the code that I currently have in place re: screen sizes:

@media only screen and (min-width: 1025px){
.header-image {
padding-top: 86px !important;
}
}

@media only screen and (max-width: 1024px){
.header-image {
margin-top: -2px;
}
}

Thanks very much for any help you can provide.

– Jeremy

The page I need help with: [log in to see the link]