Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Fonts not resizing on headers

Featured Lock Resolved Issue
Hey guys,

I have changed the fonts on the headers for all the pages on my site that is using Rhino, and sadly now none of them resize with the window anymore. So for any screen size smaller than desktop, the words are way too big. Is there a way that I can change this so the fonts resize properly again? As far as I'm aware, this is the only code that I have changed to alter the fonts:

Website address: http://www.otato.ca

.sppb-slideshow-fullwidth-item .sppb-slideshow-fullwidth-item-text h1 {
font-size: 270px;
color: #FFFFFF;
font-family: "Bowlby One", sans-serif;
position: relative;
top: 90px;
right: 0;
letter-spacing: -9.5px;
text-shadow: 0 11px 10px rgba(0,0,0,0.19);
margin: 0;
z-index: 2;
line-height: .65;
}
.sppb-slideshow-fullwidth-item .sppb-slideshow-fullwidth-item-text h1 small {
display: block;
font-size: 90px;
color: #FFFFFF;
font-family: "Paytone One", sans-serif;
letter-spacing: -5.7px;
text-shadow: 0 11px 10px rgba(0,0,0,0.19);
font-weight: 700;
position: relative;
}

.sp-page-title h2 {
letter-spacing: -3px;
font-size: 200px;
color: #FFFFFF;
font-family: "Bowlby One", Helvetica Bold, sans-serif;
position: relative;
top: 120px;
right: 0;
letter-spacing: -9.5px;
text-shadow: 0 11px 10px rgba(0,0,0,0.19);
margin: 0;
z-index: 2;
line-height: .65;
}

.sp-page-title h2:before {
background: none;
}

6 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
I agree that that addon doesn't have "adv" settings for Headings font-size,
but I cannot change it. That's why I suggested you alternative solution.

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
sure, have you ever heard about "@media screen" in CSS ?

Paul Frankowski - Staff

More than a month ago #Permalink

/* =============iPad in portrait & landscape=========== */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}

/* =============Small Tablets=========== */
@media screen and (max-width: 767px) {
/* STYLES GO HERE */
}

/* =============Smartphones=========== */
@media screen and (max-width: 480px) {
/* STYLES GO HERE */
}

Hayden Cyr

More than a month ago #Permalink
Thanks, that works but using "font-size: 35vmin;" doesn't work properly when referencing the slideshow items it seems. It looks like it is only resizing the font to the size relative to the smallest screen size of each @media statement. I have made it fit, but is it just the "advanced slideshow" module that's not working right with that. It works fine on regular headings.

Hayden Cyr

More than a month ago #Permalink
Understood. Thanks for the clarification!


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 128
Sifat

Sifat

Total Accepted Answers: 89
Toufiq

Toufiq

Total Accepted Answers: 45
Pavel

Pavel

Total Accepted Answers: 6
Sohan

Sohan

Total Accepted Answers: 5

114

Templates

292863

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us