Need help? Check out our Support site, then


Default base font size for posts - melody theme

  1. 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.

  2. 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

  3. 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 :(

  4. 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

  5. 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?

  6. 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

  7. 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.

    :((

  8. 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%
     }
    }
  9. 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?

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

  11. 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

  12. Nada.
    Preview still works though!

  13. 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;
      }
    }
  14. 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!

  15. 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! 🤞

  16. 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.

  17. 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 :)

  18. @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.

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

  20. @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.

  21. AYYYYYYYYYYYY!!! VICTORYYYYYYYYY!!!!!!!
    Thank you both with all my heart <3 <3 <3 <3 <3 <3

  22. You are welcome.

  23. So question then, do I still need all the @media cues or can I go back to the very first one:

    @media screen and (min-width: 960px) {
      .single.sidebar-none .entry-content img.size-full{
        margin-left:-25%;
        max-width:1043px;
        width: 150%;
      }

    }

  24. YAY! That's awesome.

    If I were you, which I am not, I would keep the @media cues. It's more code, but it's more refined than the one you just posted. That one gets the job done but it subtly compromises the pixels of your images. The other code gets the job done without compromises.

    I'm so happy this is worked out! I was getting worried toward the end...

  25. Haha!! It was getting pretty hairy there for a minute there but you plowed right ahead anyway :))

    So for my education;
    Can you explain in 'code for dummies' terms, what each block of code (of the final code fix) means?

    Like what does this block of code do?

    img.size-full {
    	margin-left: -150px;
    	max-width: 1000px;
    	width: auto
    }

    And then what does this one do?

    @media screen and (max-width: 960px) {
    img.size-full {
      margin-left: inherit;
      overflow: hidden;
      width: 100%
     }
    }

    And what's this one for?

    @media screen and (min-width: 960px) and (max-width: 1029px) {
     img.size-full {
      margin-left: -100px;
      max-width: 800px;
      width: auto
     }
    }

    etc...
    And how do all 4 blocks interact with each other when written like this?

    (may as well learn something afterall :D)

  26. Also,

    In this new code, is there any way to adjust the pictures back to the width they were before under this old code?

    @media screen and (min-width: 960px) {
      .single.sidebar-none .entry-content img.size-full{
        margin-left:-25%;
        max-width:1043px;
        width: 150%;
      }
    }
  27. Hi Dana,

    I love your question! We've done enough work here that we might as well take away some ideas into our next projects.

    I'm guessing that you have some CSS basic knowledge. We have a refresher page if my assumption is wrong. This lays out the basics well:

    https://en.support.wordpress.com/custom-design/css-basics/

    The next thing to talk about is @media. Those are called media queries. They're a more recent part of web development that became standard when small cell phone screens became advanced enough to load regular web pages (happy 10th anniversary, iPhone!). We also have a support page dedicated to teaching about media queries:

    https://en.support.wordpress.com/custom-design/custom-css-media-queries/

    Take a glance at that page, then see your code again with commentary notes:

    https://gist.github.com/JesseStu/bf1535d69a16bcf6244677d3e44db41e

    I'm not exactly clear about what you want with your last question. If you don't like the extra-large images, you can delete all the image-related custom CSS and your page should return to normal. You can also turn it off and preserve the code if you type /* at the beginning and */ at the end. The web browser will skip commands. Is that what you mean?

    Best,
    Jesse

  28. Sorry about not being clear in my last question, I was tweaking some formatting and was fooling around with my images more. I think I got it now though.

    Thanks for the tips and tricks, I've bookmarked those pages for reference later ;)

    Hope you have a great weekend!

  29. You’re welcome. It’s been a pleasure. Enjoy your cooking and blogging and cursing 😜.

You must log in to post.

About this Topic