Support » Theme: Libretto » Article Title on Mobile is blocking menu options and hard to read

  • Resolved mch210

    (@mch210)


    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 7 replies - 16 through 22 (of 22 total)
  • Certainly. You could change your earlier CSS to include that specification as well. Quick question though: would you be okay getting rid of the big first letter effect on mobile? Because unless we do, there’s a lot of adjusting that would be involved to make the layout work consistently.

    Thread Starter mch210

    (@mch210)

    Appreciate the help. Sure. I don’t need to have that on mobile.

    Okay, here’s the code you can add to make the font smaller on mobiles (it will maintain the drop cap but will make it smaller as well):

    @media only screen and (max-width: 768px) {
        .single-post .entry-content p {
            font-size: 1.4rem;
        }
        .format-standard:not(.post-password-required) .entry-content > p:not(.no-emphasis):first-of-type:first-letter, 
        .page:not(.post-password-required) .entry-content > p:not(.no-emphasis):first-of-type:first-letter, 
        .emphasis:first-letter {
            font-size: 50px;
        }
    }

    I hope that helps 🙂

    Thread Starter mch210

    (@mch210)

    Thank you, that is the perfect size! It’s probably my fault for not being more clear, but I was hoping to make the font size smaller not only when you click on a single post, but also when you are on the home screen or when you click a category through the menu. Right now the font size only changed in single posts.

    Is there a way to change the font size in the body of the post for not only single posts but also on the homescreen and categories?

    Thank you! The help is really much appreciated!

    Thread Starter mch210

    (@mch210)

    Along with my message above, I just realized that I am having similar problems with the post titles on my desktop but didn’t realize it because I have my browser screen minimized to 80%. But with normal browser screen size my site titles are also blocking some menu options on desktop. Is there CSS to make the font size smaller for post title’s on desktops too? And I would also appreciate CSS to make the font size smaller in the body of posts on desktop (for the entire website-single post, home screen and categories).

    I promise after this I am done! If there is anywhere to donate for your great help let me know! To sum up:

    1) CSS for mobile to make the font size smaller in the body of the post for the entire website (homescreen, single post, categories) and not only single post.

    2) CSS for desktop to make the post title font size smaller

    3) CSS for desktop to make the body of the post font size smaller for entire website (homescreen, single post, categories)

    I can’t tell you how much appreciate this! And again, let me know if there is any way to donate/support for all your help!

    Actually the best place to go for extensive customization is to an individual contractor. You can find some through UpWork.com. We can help with bugs, like when your title is overlapping, and with a minor change like making the font smaller on mobile, but lists of customizations are outside our scope of support.

    But, you take a look at the CSS we gave you and adjust it as needed. For example, if you want it to be resized on all screens, try copying it, and taking out the first line that says screen max-width. And then take out the ending bracket too.

    And if you don’t want it just on “.single-post” take out that part, too, so it just applies to .entry-content.

    This guide may help:
    https://en.support.wordpress.com/custom-design/css-basics/

    Thread Starter mch210

    (@mch210)

    Ok. That makes sense. I was able to fix the issue of the post title on my desktop with your advice to adjust the CSS and also making the font smaller everywhere.

    Thank you so much!!!!!!!!!! I can’t thank you enough!!!!!!!!!!!

    • This reply was modified 2 years, 6 months ago by mch210.
    • This reply was modified 2 years, 6 months ago by mch210.
Viewing 7 replies - 16 through 22 (of 22 total)
  • The topic ‘Article Title on Mobile is blocking menu options and hard to read’ is closed to new replies.