site header being affected by .font-header changes

  • nonamer

    (@localgreeneats)


    8 years, 1 month ago

    How to create smaller space between blog post and blog date without changing look of the site header?

    This is the code I have to use to drop the site header down on smaller screens but that also means there is unusually large space between the blog title and date.

    @media screen and (max-width: 550px) {
    h1:not(.site-title),h1:not(.site-title) a,.font-header {
    font-size: 5rem;
    margin-top: 70px;
    }
    If I change the margin-top to 10px, it reduces the space between the title and date however my site header disappears on the top of the page on small screens.

    Suggestions on fixing this?

Viewing 4 replies - 1 through 4 (of 4 total)

  • What theme are you using? Can you post a link to your site?

    Thread Starter nonamer

    (@localgreeneats)

    Theme: Make

    https://www.localgreeneats.com/category/blog/

    The spacing looks fine on laptop screens, it’s when the browser size or screen size is smaller the spacing increases.

    The code you’re using right now affects all <h1> tags (except for ones with the class “site-title”), which is a bit too broad for what you’re apparently trying to do. Instead, you could separate out the different <h1> tags into different rules so you can target them separately as well:

    .header-content h1 {
  font-size: 5em;
  margin-top: 70px;
}

    will only affect the site title itself (local Green Eats), and using

    h1.entry-title {
  font-size: 5em;
  margin-top: 10px;
}

    will only affect the blog post titles (“late Summer Basil pesto, “A little more to know”).

    Thread Starter nonamer

    (@localgreeneats)

    thanks for your help, I had to adjust some other things but I appreciate you pointing out that I need to make changes in h1.entry-title

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘site header being affected by .font-header changes’ is closed to new replies.