Joomla Templates Club 406,261 posts

[tfosnom Friend tfosnomJoin date: October 2010Posts: 742Downloads:0Uploads:31 Thanks: 145 Thanked: 200 times in 94 posts]

#194309

Hi all
If you view my test site here and scroll down under the main display, you will see the text “Latest Articles” on a nice banner sized bkg. On the JA demo this text resizes on responsive devices. see this page

On my site it does not, but I wish it to do so.

A better example for test is here as well as the same page ran through the responsinator site to show the result in all responsive views here

I have changed the text size to 60px from the original 90px via the custom.css file (.jamasshead h3 call) to allow for longer textual descriptives, but other than that I don’t believe I have inadvertently changed anything to break the responsiveness.

I have included the site details for dev staff and would love if someone could have a look and advise or rectify please
Blessings Shannon

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#520887

@tfosnom: In fact, you can see that the new <h3> font-size of Masshead in your custom.css is overriding all <h3> font-size that we define on this Obelisk template for responsive view.

If you try to replace the following in your custom.css file:

.jamasshead h3 {
margin: 0;
color: #fff
font-size: 60px;
}

with:

@media (max-width: 767px) {
.jamasshead h3 {
font-size: 19px;
}
}
@media (max-width: 979px) and (min-width: 768px) {
.jamasshead h3 {
font-size: 50px;
}
}

Then, the category texts should be responsive properly on mobile/table/desktop view.

1 user says Thank You to phong nam for this useful post

1. tfosnom

[tfosnom Friend tfosnomJoin date: October 2010Posts: 742Downloads:0Uploads:31 Thanks: 145 Thanked: 200 times in 94 posts]

#520898

<em>@Leo Burnetts 409070 wrote:</em><blockquote>@tfosnom : In fact, you can see that the new <h3> font-size of Masshead in your custom.css is overriding all <h3> font-size that we define on this Obelisk template for responsive view.

If you try to replace the following in your custom.css file:

.jamasshead h3 {
margin: 0;
color: #fff
font-size: 60px;
}

with:

@media (max-width: 767px) {
.jamasshead h3 {
font-size: 19px;
}
}
@media (max-width: 979px) and (min-width: 768px) {
.jamasshead h3 {
font-size: 50px;
}
}

Then, the category texts should be responsive properly on mobile/table/desktop view.</blockquote>

Hi Leo
Thanks for the help, I had to change the initial font size in the template.css from 90 to 60 to allow for more text, but adding the rest allows it to work fine

1 user says Thank You to tfosnom for this useful post

1. phong nam

[Author]

Posts