Home Page Title Font Re-size

  • Resolved npak

    (@npak)


    9 years, 5 months ago

    Having a little trouble with the font on the homepage title. For lack of a better descriptor; my page’s ‘PINNACLE’ text equivalent.

    On the pinnacle free demo page the font re-sizes as the display size changes. I’ve tried to add the css I found when inspecting the ‘PINNACLE’ element though it either does nothing or makes the font the max size I would want. I’ve included the css additions that I have tried and would love if someone could point out whats wrong.

    Here’s my page – bangondesignbuild.com

    In an attempt to match the demo page –

    .home-page-title {
    font-size: 100px;
    line-height: 100px;
}

@media (max-width: 992px)
.home-page-title {
    font-size: 80px;
    line-height: 80px;
}

@media (max-width: 768px)
.home-page-title {
    font-size: 50px;
    line-height: 50px;
}

    Which made the font size permanintly 100px

    And here’s what I have now. To me, it seems a bit dodgy and I’m not really sure why it works for some browsers (Chrome and Firefox) and not others (IE and Safari)

    @media (min-width: 100px) {
.home-page-title {
font-size: 25px;
line-height: 25px;
}

@media (min-width: 480px) {
.home-page-title {
font-size: 50px;
line-height: 50px;
}

@media (min-width: 768px) {
.home-page-title {
font-size: 75px;
line-height: 75px;
}

@media (min-width: 992px) {
.home-page-title {
font-size: 100px;
line-height: 100px;
}

    The effect I’m looking for is almost identical to the demo page. I’d like to have the text be 100px at it’s largest then step down to fit inside smaller display windows.

    Thanks for the great theme and support,
    Nils

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

  • Hey,
    So in the first example your missing brackets {

    so change it to :

    .home-page-title {
    font-size: 100px;
    line-height: 100px;
}

@media (max-width: 992px) {
.home-page-title {
    font-size: 80px;
    line-height: 80px;
}
}
@media (max-width: 768px) {
.home-page-title {
    font-size: 50px;
    line-height: 50px;
}
}

    and you should be set.

    The second one you are missing the closing bracket for each media query and leaving that many open brackets can cause lots of issues.

    @media (min-width: 100px) {
.home-page-title {
font-size: 25px;
line-height: 25px;
}
}

@media (min-width: 480px) {
.home-page-title {
font-size: 50px;
line-height: 50px;
}
}
@media (min-width: 768px) {
.home-page-title {
font-size: 75px;
line-height: 75px;
}
}
@media (min-width: 992px) {
.home-page-title {
font-size: 100px;
line-height: 100px;
}
}

    I recommend going with the first.

    Kadence Themes

    Thread Starter npak

    (@npak)

    Worked a charm! New to css in case you couldn’t tell! 5 stars for sure

    Similar problem. To get the free Pinnacle theme slider text to scale I used the following code from Kadence Themes (thanks:) However, .home-page-title font size and line height for regular computer monitor does not seem to work, but the @media does.

    Site is demo2.juristheme.com

    .home-page-title {
    font-size: 100px;
    line-height: 100px;
    }

    @media (max-width: 992px) {
    .home-page-title {
    font-size: 80px;
    line-height: 80px;
    }
    }
    @media (max-width: 768px) {
    .home-page-title {
    font-size: 50px;
    line-height: 50px;
    }
    }

    Hey,
    You just need to remove this from your custom css box:

    <!-- Makes Home page text on slider image scale for mobile -->

    Thats how you leave comments in HTML not css.

    For css use:

    /* Makes Home page text on slider image scale for mobile */

    Kadence Themes

    I can’t believe I didn’t catch that. Thanks so much!!

    In the Pinnacle theme go to Appearance > Theme Options > Custom CSS and paste all your customizing css code there.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Home Page Title Font Re-size’ is closed to new replies.