Tweaks to mobile interface


#1

Hello,

I’d like to make a couple of tweaks to the way my site (moviemanifesto.com) 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 for the 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


#2

Hello Jeremy,

  1. It looks like you have enabled infinite scroll, that’s why you can’t see your sidebar, it should be displayed below the main content in mobile view.

  2. Try to use the following CSS code. You can add CSS code in Customize → Additional CSS section.

@media (max-width: 380px) {
    .site-title a {
        font-size: 9.5vw;
    }
}

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?

Please create a new topic for this issue with more details to keep forum in good order and make it easier to help you.

Kind Regards, Roman.


#3

Thanks Roman. Disabling infinite scroll worked; I can now see the sidebar on mobile.

However, as for the text wrapping issue with the site title, I added the CSS code that you suggested, and according to Chrome’s developer tools, it did not fix the issue. (I can’t test it on my own phone, as I don’t have an iPhone, so I’m relying on what Chrome tells me.) I even tried reducing the font to something very small, just for testing purposes, but per the developer tools, it didn’t have any effect. Any ideas?

Per your suggestion, I’ll create a new topic on the forums.

Thanks,
Jeremy


#4

Hello Jeremy,

How exactly you added the CSS code?

Kind Regards, Roman.


#5

I’ve added it in my style.css sheet in the Appearance–>Editor screen. I have a decent amount of CSS in there, so I’m pretty confident that I added it in the correct place.


#6

Hello Jeremy,

I’ve just checked your mobile header once again and saw that the code is applied and working.

So is this issue already resolved?

Kind Regards, Roman.


#7

Hi Roman,

Yes! Sorry, it must have taken awhile for Chrome’s developer tools to reflect the new code (and again, I couldn’t test it on my own phone). Thanks very much for your help, I sincerely appreciate it.

  • Jeremy

#8

Okay, you are welcome Jeremy!

Please feel free to ask any other questions that you might have in future.

Kind Regards, Roman.


closed #9