Joomla Templates Club 406,261 posts

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1052109

Hi
This code in used for the font size

.acm-hero.style-4 .hero-content .hero-heading {
    font-size: 75px;
}

Kindly make sure there are different Media queries used for different font size.
You can check this here http://prntscr.com/g1997s
and override it accordingly.

Regards

[alex_feng Friend alex_fengJoin date: December 2010Posts: 120Downloads:61Uploads:25 Thanks: 11 Thanked: 10 times in 1 posts]

#1052127

Hi Pankaj
Thank you. I add the attached custom.css to the server and expect both heading and intro have the same font size. But they are not. Can you please let me know what went wrong?

[alex_feng Friend alex_fengJoin date: December 2010Posts: 120Downloads:61Uploads:25 Thanks: 11 Thanked: 10 times in 1 posts]

#1052129

Hi Pankaj
Never mind.

[alex_feng Friend alex_fengJoin date: December 2010Posts: 120Downloads:61Uploads:25 Thanks: 11 Thanked: 10 times in 1 posts]

#1052131

The intro texts disappear while reducing the screen size. Any codes I need to change?

BTY I added the following codes to custom.css

@media screen and (min-width: 1200px) {
.acm-hero.style-4 .hero-content .hero-intro .hero-heading{
font-size: 75px;
}
}

@media screen and (min-width: 992px) {
.acm-hero.style-4 .hero-content .hero-intro ,hero-heading{
font-size: 65px;
}
}

@media screen and (min-width: 767px) {
.acm-hero.style-4 .hero-content .hero-intro .hero-heading{
font-size: 55px;
}
}

@media screen and (min-width: 480px) {
.acm-hero.style-4 .hero-content .hero-intro .hero-heading{
font-size: 45px;
}
}

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1052143

Hi
add below code in the custom.css file to show it

.acm-hero .hero-intro {
    display: block!important;
}

Regards

[alex_feng Friend alex_fengJoin date: December 2010Posts: 120Downloads:61Uploads:25 Thanks: 11 Thanked: 10 times in 1 posts]

#1052299

Hi Pankaj
The intro texts display after the codes added. But the font sizes of intro and heading are different as reducing the screen size.

BTY, I added the following codes to custom.css to specify the font family and font weight. But the font weights look different. How can I make the same font weight? Thanks.

.acm-hero.style-4 .hero-content .hero-intro {
font-family: "Century Gothic", Arial, Sans-serif;
font-weight: 50;
}

.acm-hero.style-4 .hero-content .hero-heading {
font-family: "Times New Roman", Times, serif;
font-weight: 50;
}

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1052510

Hi
You can add the !important with the code to force it to load.
example

.acm-hero.style-4 .hero-content .hero-heading {
font-family: "Times New Roman", Times, serif;
font-weight: 50!important;
}

Hope it helps.

Regards

[alex_feng Friend alex_fengJoin date: December 2010Posts: 120Downloads:61Uploads:25 Thanks: 11 Thanked: 10 times in 1 posts]

#1058077

Hi Pankaj,
It looks like my custom.css is not responding. It is not overwriting the original css.

[alex_feng Friend alex_fengJoin date: December 2010Posts: 120Downloads:61Uploads:25 Thanks: 11 Thanked: 10 times in 1 posts]

#1058222

Hi Pankaj,
On my local host, it responds right away. On the remote server, it just took for a long time for Godaddy’s server to have the updated CSS file in place. Thank you.

[Author]

Posts