Default base font size for posts – melody theme

  • Unknown's avatar
    danafashina · Member ·

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

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • Unknown's avatar
    danafashina · Member ·

    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%;
  }

    }

  • Unknown's avatar
    jessestu · Member ·

    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…

  • Unknown's avatar
    danafashina · Member ·

    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)

  • Unknown's avatar
    danafashina · Member ·

    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%;
  }
}
  • Unknown's avatar
    jessestu · Member ·

    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:


    /* Without a @media query, the following makes every image set to "full size" in the editor show 1000px
    across, centered with the margin-left command. "width: auto" overrides competing image size commands.
    This command will affect every full-sized image on the site unless it's overriden by other @media queries. */
    img.size-full {
    margin-left: -150px;
    max-width: 1000px;
    width: auto
    }
    /* The following @media queries override and change this first command.
    This first @media targets only screens smaller than 960px across, usually phones and tablets. First, it
    disables the "margin-left" above. That causes two issues: the image is too big and causes side-scrolling.
    The width and overflow commands make sure that doesn't happen: the image shrinks to fill
    it's parent div to 100%, and if something happened to cause it to spill over, it would hide the side scrolling. */
    @media screen and (max-width: 960px) {
    img.size-full {
    margin-left: inherit;
    overflow: hidden;
    width: 100%
    }
    }
    /* The next two address an annoying issue I found. The original Melody theme doesn't have the extra-wide
    images until the screen is at least 1400px wide. I wanted the images to become extra wide at smaller screen
    sizes. When I applied the top code here to a screen at 960px wide, the image was not centered at all. So,
    these two @media queries make the image a little smaller and centered for two "break points" (the term
    for when a @media query should accomodate a different screen size, such as the screen real estate
    between a cell phone in portrait mode or in landscape).
    This first one only applies for screens between 960px up to 1029px */
    @media screen and (min-width: 960px) and (max-width: 1029px) {
    img.size-full {
    margin-left: -100px;
    max-width: 800px;
    width: auto
    }
    }
    /* This second applies to screens from 1030px up to 1099. After 1099, there are no more @media queries,
    so the browser goes back and applies the "img.size-full" code at the very top of the page. */
    @media screen and (min-width: 1030px) and (max-width: 1099px) {
    img.size-full {
    margin-left: -110px;
    max-width: 900px;
    width: auto
    }
    }
    /* Thus, by the time we get to the bottom of the @media queries, we've created code that started with how
    to treat every image, then ovverrode how those look on every screen size until someone with a screen
    wider than 1100px loads your blog */
    #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;
    }

    view raw

    danafashina.css

    hosted with ❤ by GitHub

    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

  • Unknown's avatar
    danafashina · Member ·

    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!

  • Unknown's avatar
    jessestu · Member ·

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

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