Default base font size for posts – melody theme

  • Author
    Posts
  • #3045509

    danafashina
    Member

    Hi!!

    I would love some help adjusting the base font size in the Melody theme.

    Right now, the base font size affects the font in the post themselves and also the menu items on the home page.
    I prefer the font size in my posts to be small and that translates over to the the menu item fonts as super small.

    Anyway to unlink the two?

    I don’t mind if they’re connected on the type of font but I’d like to make the size aspect of the font in posts, independent from the menu items.
    (note: this discrepancy is only noticed on a desktop, the mobile menu looks great)

    thanks in advance!!
    http://www.ivegotcake.com

    The blog I need help with is ivegotcake.com.

    #3045633

    jessestu
    Staff

    Hi Dana,

    Those fonts are so small!

    There are forums based on each premium theme. Melody has had this question come up before. The fix in that linked document doesn’t work on your submenu items under “Food.”, so I’ve modified it here to take into account your main menu and the drop down. Add these to the bottom of your Custom CSS.

    #site-navigation {
      font-size: 20px;
    }
    .sub-menu a {
     font-size: 10px;
    }

    The sub-menu font size here says 10px, which should be much smaller than 20px, but because of other resizing of fonts based on relative commands (“70%” font sizes, etc.) happening in the theme, these look to my eye about the same size. Nonetheless, adjust these however you would like.

    You didn’t ask for this, yet I observe your comments section font is small, too, to the point of being difficult for me to read. If you don’t have individual control over that, append this code. If you made the choice and like it, just skip this part:

    .wf-active .comment-list {
      font-size: 14px;
    }

    Let us know how else we can help!

    Best,
    Jesse

    #3045636

    danafashina
    Member

    Yessss!!!
    Good call on the comments font bit. I needed that!
    Any chance we can extend it to the footer widgets as well?
    They’re also super duper tiny :(

    #3045717

    jessestu
    Staff

    Hi Dana,

    Try this code. It resets the font sizes back to a normal size for all the footer elements, the search bar, and the navigation links and buttons at the bottom of your homepage and individual post pages. Add this to the bottom of your custom CSS.

    .wf-active .site-footer, .wf-active button, .wf-active input[type="button"], .wf-active input[type="reset"], .wf-active input[type="submit"],
    .wf-active input[type="search"], .wf-active .site-main #infinite-handle span, .wf-active .post-navigation .meta-nav {
      font-size: 1em;
    }

    Let us know how else we can help!

    Best,
    Jesse

    #3045808

    danafashina
    Member

    Hey Jesse,

    So I noticed now that when I am in edit post mode, and when I go to insert pictures into a post, the pictures no longer show up. It’s hard to describe…it’s like my cursor recognizes something’s there but that thing isn’t actually visable, does that make any sense?

    I get around this by viewing the post in preview mode, and from there I can see the image I uploaded and decided whether I want it there or not, etc etc.

    Any ideas what’s going on?

    #3045810

    jessestu
    Staff

    Hi Dana,

    Thanks for coming back. I’m not surprised to hear of the issue. Locking in these images to always show bigger on your posts can easily create problematic situations.

    Since I can’t access your editor, this isn’t a guaranteed fix. Come back if it doesn’t do anything. Also, this is the whole code we’ve worked on so far; you can replace all the old code with it (I re-centered your big images):

    @media screen and (min-width: 960px) {
      body.single.sidebar-none:not(.wp-editor) div.entry-content img.size-full {
        margin-left:-20%;
        max-width:1043px;
        width:140%;
      }
    }
    #site-navigation {
      font-size:20px;
    }
    .sub-menu a {
      font-size:10px;
    }
    .wf-active .comment-list {
      font-size:14px;
    }
    .wf-active .site-footer,.wf-active button,.wf-active input[type="button"],.wf-active input[type="reset"],.wf-active input[type="submit"],.wf-active input[type="search"],.wf-active .site-main #infinite-handle span,.wf-active .post-navigation .meta-nav {
      font-size:1em;
    }

    Let me know how it works!

    Best,
    Jesse

    #3045839

    danafashina
    Member

    Sadly, nothing.
    Tried the code and still having issue where I have to click ‘post preview’ to see the images that aren’t showing up in the editor.

    :((

    #3045843

    jessestu
    Staff

    Ok, thank you for testing it. Replace the @media section with this new CSS. I may be mistaken, but I don’t think WordPress generates the class “.status-publish” in the editor. Test and see:

    @media screen and (min-width: 960px) {
     .single.sidebar-none .status-publish .entry-content img.size-full {
      margin-left:-20%;
      max-width:1043px;
      width:140%
     }
    }
    #3045854

    danafashina
    Member

    No effect…
    Any way I could share my screen with you so you can see / play in the editor mode, would that help us out on this?

    #3045855

    danafashina
    Member

    PS
    That last code prevented me from even seeing any images in preview mode, so I reverted back

    #3045856

    jessestu
    Staff

    Hi Dana,

    Thank you for trying all of this. I appreciate your patience! As a volunteer on these forums, I can’t do a screen sharing. That would significantly speed this up. Let’s try more with the options we have.

    I’ve gone back to the original extra-wide image code and started there for this code. Delete all of the @media section and replace it with this longer section:

    @media screen and (min-width: 960px) and (max-width: 1029px) {
      img.size-full {
        margin-left:-100px;
        max-width:800px;
        width:auto;
      }
    }
    @media screen and (min-width: 1030px) and (max-width: 1099px) {
      img.size-full {
        margin-left:-110px;
        max-width:900px;
        width:auto;
      }
    }
    @media screen and (min-width: 1100px) {
      img.size-full {
        margin-left:-150px;
        max-width:1000px;
        width:auto;
      }
    }

    Let me know how it goes!

    Best,
    Jesse

    #3045857

    danafashina
    Member

    Nada.
    Preview still works though!

    #3045878

    jessestu
    Staff

    I reviewed the original extra wide image feature more closely and adjusted the code below. Test it and let me know what happens.

    If it doesn’t work after you’ve saved the CSS and tested it, help me by reporting on these steps:

    • After updating and saving the custom CSS, if it still hides the images in the composer, delete all of the @media parts (leave the font-size ones in) and test it again. Does it go back to normal then? I ask to verify it’s not the other elements causing the issue.
    • After updating and saving the code, if you don’t see the pictures in the editor, please try resizing the editor window to make it smaller, like a tablet or cell phone. When the screen is compressed, the image CSS might turn off and the pictures may show up. It’s not a permanent fix, but it tests things.
    • With the code updated, if things are still broken, I want you to try a different editor. When you’re on My Sites, add “wp-admin/” to the end of your URL. This takes you to the old editor. Load one of the posts in that editor down at the Posts. How do the images work in this window? How do they work if you resize the window then?
    • Lastly, please don’t revert to the old code after you update this one. That lets me know we’re on the same page of testing, or I need to clear my cache.

    Thank you for your patience in this. We will supercharge your site photographs! If we don’t get it done in the next couple posts, I’ll invite someone with great CSS chops to try to tackle this. Remember, also, delete this code if it’s keeping you from writing your posts!

    @media screen and (max-width: 960px) {
    	img.size-full {
    		margin-left: inherit;
    		overflow: hidden;
    		width: 100%;
    	}
    }
    @media screen and (min-width: 960px) and (max-width: 1029px) {
      img.size-full {
        margin-left:-100px;
        max-width:800px;
        overflow: visible;
        width:auto;
      }
    }
    @media screen and (min-width: 1030px) and (max-width: 1099px) {
      img.size-full {
        margin-left:-110px;
        max-width:900px;
        overflow: visible;
        width:auto;
      }
    }
    @media screen and (min-width: 1100px) {
      img.size-full {
        margin-left:-150px;
        max-width:1000px;
        overflow: visible;
        width:auto;
      }
    }
    #3045886

    danafashina
    Member

    Holaaa!

    Sorry for the delay.

    I’ve implemented the different formats and options you’ve laid out for me and here are my findings;

      I tried the code as listed, adding all 4 of the different @media codes in the CSS editor – to no avail

    Then I tried the first bullet option – where you say delete all the @media keeping in only the CSS code associated with font size – In doing so, all the images were gone from the post themselves and also not seen the post editor.

      No difference when viewed on a different screen (phone)

    I’ve always used wp-admin (I never got into the new editor) so all these issues were seen and continue to present themselves in the wp-admin editor.

      The current code in the CSS editor is this last one you gave me, the one that contains all 4 @media codes.

      I just want to let you know that I’m so grateful that everyday you’ve taken time to work on this for me and comment back. The WP community is really wonderful and I’m especially thankful to be working with you!

    #3045888

    jessestu
    Staff

    I appreciate your note, Dana. I’m glad you keep trying my tests! This is the kind of thing I enjoy testing and re-testing when I’m by myself. I tend to assume it drives other people crazy. I don’t know if that’s a valid assumption. Thanks for hanging in there with me.

    Thanks for trying all the steps. I can reproduce how the images disappear when the @media cues are gone. This code replaces all the @media cues (notice one below no longer is @media. That’s on purpose.).

    img.size-full {
    	margin-left: -150px;
    	max-width: 1000px;
    	width: auto
    }
    
    @media screen and (max-width: 960px) {
    img.size-full {
      margin-left: inherit;
      overflow: hidden;
      width: 100%
     }
    }
    
    @media screen and (min-width: 960px) and (max-width: 1029px) {
     img.size-full {
      margin-left: -100px;
      max-width: 800px;
      width: auto
     }
    }
    
    @media screen and (min-width: 1030px) and (max-width: 1099px) {
     img.size-full {
      margin-left: -110px;
      max-width: 900px;
      width: auto
     }
    }

    On your Melody theme, right below the custom CSS box, there should be a Media Width box. Type “1000” into that. Select Publish.

    Let me know what you see! 🤞

    #3045892

    Hi @danafashina,

    So I noticed now that when I am in edit post mode, and when I go to insert pictures into a post, the pictures no longer show up. It’s hard to describe…it’s like my cursor recognizes something’s there but that thing isn’t actually visable, does that make any sense?

    When I look at this post, https://ivegotcake.wordpress.com/wp-admin/post.php?post=14126&action=edit in your editor, the images sizes are set to 1px x 1px. They are there, but very tiny. I would suggest deleting both of them from the editor and then reinsert them at full size.

    You might have to switch to the text tab in the editor and delete all the code there since the images are too tiny to even select and delete.

    #3045893

    danafashina
    Member

    Ok so you want me to copy the entire thing (the roughly 4 paragraphs of code) into the CSS editor, and then type 1000 in the media width box and then trying publishing, correct?

    Just want to confirm that I’m taking the whole code and not just specific sections :)

    #3045894

    @danafashina, the code that @jessestu is giving is only for the front end of your site, it will not affect the editor. See my reply above yours.

    #3045895

    The issue is not CSS, it is that you have the images set at 1px x 1px size.

    #3045896

    jessestu
    Staff

    @danafashina, use all of the code above to replace all of the @media cues in the CSS, and add the 1000, and publish. So, you are correct, except keep the font size changes there, too.

    Per @thesacredpath, delete and re-add the images, as well.

The topic ‘Default base font size for posts – melody theme’ is closed to new replies.