Header Font Size and Media Queries

  • J3meer

    (@reejemgonzales)


    6 years, 1 month ago

    Hi, I intend to use Pureblog for long term as it answers to the simplicity that I am looking into for a template. I would first like to say Thank you.

    One major challenge I have been resolving for almost 3 weeks now is the header font-sizes for the .site-title and .site-description.

    Basically, I am using CSS to override the font family for the header and description. It was working well, however, I could not reduce the size even if I use different media queries or the default resolution. It seems that the “font-size” parameter on my custom CSS doesn’t take effect. Only the “font-family” does.

    The reason why I think the “Pureblog CSS” is the culprit is that if I tick “Don’t use the theme’s original CSS”, my font-size takes effect, but likewise, the rest has to be recreated

    Here’s just a sample CSS I have.

    

/* Computer screens */
.site-title {
	font-family: 'Rock Salt', Poppins;
        font-size: 20px;
}
.site-description {
	font-family: 'Special Elite', Open Sans;
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
.site-title {
	font-family: 'Rock Salt', Poppins;
	font-size: 12px;
	}
}

    Appreciate your help.

    • This topic was modified 6 years, 1 month ago by J3meer.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Andre

    (@andre-jutras)

    Thank you for your great comments, and you are very welcome ??

    Just to confirm, you just need to change the font size of the site title only?

    Sometimes css can be finicky when overriding it. For example, the theme’s sizing for the site title is done from this, which is very similar to how the Twenty Seventeen theme does it:

    Front Splash Page

    .pureblog-front-page.has-header-image .site-title, 
.pureblog-front-page.no-header-image .site-title, 
.home.has-header-image .site-title, 
.home.no-header-image .site-title {
    font-size: 4.25rem;
}

    Inner Pages

    .no-header-image .site-title, 
.has-header-image .site-title {
    font-size: 2.25rem;
}

    Hopefully that should help. Just copy the code above, add it to your Additional CSS in the customizer, then adjust the sizing to your needs. There are no media queries for these, but you can add that capability if you decide.

    Thread Starter J3meer

    (@reejemgonzales)

    Thank you so much Andre, you have resolved my 1 month nightmare. Now I kind of understand the pattern. Much appreciated

    Andre

    (@andre-jutras)

    You are very welcome ??

    As long as everything is working 100% now, it sounds like it is. I’m assuming you/we can set this topic as “Resolved” ?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header Font Size and Media Queries’ is closed to new replies.