Article Title on Mobile is blocking menu options and hard to read

Resolved mch210
(@mch210)

4 years, 2 months ago

When the responsive mobile theme is opened on an IPad or sideways mobile phone, the title of the article overlaps and blocks the menu options, making it hard to impossible to click some of the menu options and also makes the site title hard to read, not to mention it just looks sloppy. Is there a fix for this?

Secondary question, is there a way to display your logo on the homepage of the responsive mobile site when upright on a mobile phone. It seems the logo only appears in sideways view or on an IPad. Thank you and would appreciate any help.

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

Viewing 15 replies - 1 through 15 (of 22 total)

1 2 →

fresatomica
(@fresatomica)

4 years, 2 months ago

Hi there!

I see the issue you’re describing on your site, however, I was not able to reproduce it on my test site. Have you added any custom CSS code to the theme?
If not, have you tried to disable all your plugins temporarily and see if the issue disappears then?
If nothing changes, try reinstalling the theme from this link.

As for the logo, it seems that on small screens there is no space to display the logo. We can have a look if we can help you add it via custom CSS but it would be best to solve the first issue before doing any more changes.

Thread Starter mch210
(@mch210)

4 years, 2 months ago

Hi! Thank you for your help. I don’t believe I have added any custom css to my theme as far as I can remember. I disabled all my plugins and nothing changed. I don’t know how to reinstall a theme from a zip file like that, but I did uninstall the theme under the “appearance” tab and then re-installed it, and still nothing changed.

fresatomica
(@fresatomica)

4 years, 2 months ago

Thanks for the details.
To install a theme from a .zip file you can check out this page and follow the instructions from Install a Theme by using Upload Method from WordPress Admin.

Let me know how it goes.

Thread Starter mch210
(@mch210)

4 years, 2 months ago

Thank you, I installed your theme and it did not fix the issue, but it did change how my website looked on a desktop for the worse (my logo wasn’t displaying on desktop anymore either). I uninstalled your theme and went back to the original Libretto theme and things seemed to go back to normal. But the mobile problem is still there.

fresatomica
(@fresatomica)

4 years, 2 months ago

Hmm, so the problem here seems to be that you’re menu is quite long and on smaller screens where it doesn’t change to the hamburger menu, it’s displayed in 3 lines. The post title doesn’t seem to respect the gap between the menu and the post info. However, as I mentioned, I’m not able to reproduce this on my test site.
What are your settings? Have you set a header image, featured image for posts? If you could tell me some more details, I’ll check if I can reproduce it and, if I do, it will mean there’s a bug in the theme.
Otherwise, we may try to fix this with some additional CSS code.

Thread Starter mch210
(@mch210)

4 years, 2 months ago

I think the only image I have is that brick wall, which looking at the “customize” is under the header image. But after using your zip file theme, the header disappeared, and the problem still existed. I don’t think I have a single other image on the site. No featured image for posts.

Everything I have done to set up the site is pretty simple. I’m not that savvy at this stuff. Only concern I have adding CSS and stuff like that is I’m ignorant when it comes to this, so I don’t want to make any changes that could really mess things up in future updates or down the line.

supernovia
(@supernovia)

4 years, 2 months ago

Hi @mch210, would you be willing to upload a screenshot of what you’re seeing exactly? For me, on my phone, it’s the site title that gets out of control on mobile.

What I’m seeing is that a complex menu, long site title, and long post title are all competing for the same space. There might be some CSS you could use to hide one thing or another, but I’m not finding a great way to get everything to fit vertically on a horizontal mobile screen. Is there any chance you’d consider shortening the title, or not using a header image?
Thread Starter mch210
(@mch210)

4 years, 2 months ago
Thanks for the input supernova. Here is a link to Responsinator which shows how the post page shows up on different devices: https://www.responsinator.com/?url=https%3A%2F%2Fwww.imaginarybrickwall.com%2Ftop-1000-rankings-for-2020-fantasy-baseball-dynasty-leagues%2F

If you scroll down to the second one, you will see what I’m seeing on a horizontal mobile phone, and also see the issue on an IPad. And yes, the site title also gets a little out of control.

The header image is the logo of my website, so I wouldn’t want to get rid of that, and the menu options are how people find my site content, and the title also can’t really be shortened. If this is one of those things that can’t be fixed I guess I will have to decide if I can live with it, or change my theme, or maybe try to find a mobile plugin. As for changing my theme or finding a mobile plugin, I have been looking and haven’t really found anything I was happy with. Was hoping this could be fixed, but feared it couldn’t be.
- This reply was modified 4 years, 2 months ago by mch210.
supernovia
(@supernovia)

4 years, 2 months ago
You might try shrinking the text for the title on just that one post.

Here’s how to target it, but you’ll need to play with the numbers so they fit optimally:
```
@media (max-width:900px) and (min-width:400px) {
  .postid-6124 .title-block h1 {
    font-size: 3rem;
  }
}
```
Thread Starter mch210
(@mch210)

4 years, 2 months ago

Thank you, but I need a fix for not only that post, but all future and past posts as well.

Based on @fresatomica silence and your comments, is it safe to assume this can’t be fixed? Is there CSS I can add that keeps the same format as the upright view for the sidways view too? where they don’t extend my entire menu?

I appreciate your time and the help.
fresatomica
(@fresatomica)

4 years, 2 months ago
Yes, I’m afraid there won’t be a fix for this one. To change the font on all the titles, you can modify the CSS code that @supernovia gave you to this:
```
@media (max-width:900px) and (min-width:400px) {
  .title-block h1 {
    font-size: 3rem;
  }
}
```
This should resize the font on all titles so they fit into the header image:
Again, you may want to play a bit with the font size to make sure it looks good on all your posts.
Thread Starter mch210
(@mch210)

4 years, 2 months ago
Thank you! I will try that. Where exactly do I copy and paste that code into? And also which numbers in that code should I play with? Only the font size? Or max and min width too? And what range of numbers should I be within when changing those? Thank you again.
- This reply was modified 4 years, 2 months ago by mch210.
Thread Starter mch210
(@mch210)

4 years, 2 months ago

I put it in the Additional CSS section under customize and it worked! I would say it is more or less a perfect fix! Thank you @fresatomica and @supernovia !!! You guys are awesome.

I almost don’t even want to test my luck, but going back to the second question in the original post, is it possible to get my header image to show up on the upright home screen view? Regardless, thank you so much for you help!

fresatomica
(@fresatomica)

4 years, 2 months ago

I put it in the Additional CSS section under customize and it worked! I would say it is more or less a perfect fix!

Yay! I’m happy it helped.

is it possible to get my header image to show up on the upright home screen view?

Did you mean the logo? You might be able to do that, however, I wouldn’t really recommend that. There is not enough space in the header on small screens to display the logo and if we try to add it there, we’ll likely mess up the whole layout.

Thread Starter mch210
(@mch210)

4 years, 2 months ago

Ok, I will take your recommendation to just leave that alone.

One last question! Now that I know it is possible to make the font size smaller, is there a CSS code I can add to make the font size in the body of the post a little smaller on mobile? It’s not a major deal but I find it a little big and cramped and prefer/am used to the smaller typeface that the Jetpack mobile site uses (which will be discontinued in March and is why I am trying to figure all of this stuff out now). It doesn’t have to be as small as the Jetpack typeface, but somewhere in the middle would work. Appreciate your help with this one last thing. Thank you.

Viewing 15 replies - 1 through 15 (of 22 total)

1 2 →

The topic ‘Article Title on Mobile is blocking menu options and hard to read’ is closed to new replies.