Joomla Templates Club 406,261 posts

[chaddng Friend chaddngJoin date: September 2013Posts: 12Downloads:0Uploads:2 Thanks: 8 Thanked: 3 times in 1 posts]

#194748

Hi,

On my homepage my masshead title is “Out of Time”. My masshead description is “By Gill Jepson”. Both are short.

I’ve changed some of the masshead title settings in modules.less but can’t get the title to wrap on a smaller screen size.

I don’t mind losing the description if the space is limited, but the whole title should be seen. All I see, on a smaller sceen size is the first word of the title – “OUT”

Can you advise please?

Also, an unrelated question to the title of this post. On my main menu, “HOME” shows with a little arrow beside it (suggesting that there are sub-menu items to be found). There aren’t. Can you suggest why this might be?

Thank you,
Naomi

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

#522634

Hi Naomi,

For the issue of Masshead title font-size on small screen devices, you can try to create a custom.css file at templates/ja_fixel/css/ path and put the css rules into:

@media (max-width: 479px) {
.jamasshead .jamasshead-title {
font-size: 30px;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.jamasshead .jamasshead-title {
font-size: 50px;
}

.jamasshead .jamasshead-description h3 {
font-size: 20px;
}
}
@media (max-width: 979px) and (min-width: 768px) {
.jamasshead .jamasshead-title {
font-size: 40px;
}

.jamasshead .jamasshead-description h3 {
font-size: 20px;
}
}

For the arrow icon of Home menu item, I think we should use the override css styles to hide it as you want. You can do these steps:

– Go to Template Manager >> Mega Menu >> select Home menu item and put the text “no-caret” to extra class option lik emy attached snapshot.

– Then try to put these css rules into custom.css file:

.t3-megamenu .nav > .dropdown.no-caret > .dropdown-toggle .caret {
display: none;
}

Do not forget to inform me how it goes.

---

Attachments:

1. 

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

1. chaddng

[chaddng Friend chaddngJoin date: September 2013Posts: 12Downloads:0Uploads:2 Thanks: 8 Thanked: 3 times in 1 posts]

#522818

Hi Leo,
Thank you for your response to my issues. I’ve edited the custom.css file on my localhost and it appears to be working now so thank you for that. I just need to test it on actual phone & tablet sized screens.

For the second issue – the home menu arrow – For some reason (?) I cannot access the template manager for the fixel template – both on my localhost and on oot.windmill.dev.co.uk/administrator. I just get a blank screen which suggests some fatal error?

Unfortunately I can’t remember when I last accessed the fixel template manager successfully (i’m working on 2 sites at once so details like that get a bit confused). The Joomla version is 3.2.2. I know I updated the joomla version on the other site I’m working on which has caused me lots of problems but can’t remember if the fixel template came as 3.2.2 or if I’ve updated it too..?

Can you suggest anything?

Thanks,
Naomi

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

#522819

Hi Naomi,

It is a bug of our T3 system plugin on new Joomla 3.2 update. Our developer will include the stable fix in next update of this plugin. At this time, you can backup the file and follow this tip to solve the template manager problem.

Then you can try on my 2nd suggestion above on the caret arrow of Home menu item.

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

1. chaddng

[chaddng Friend chaddngJoin date: September 2013Posts: 12Downloads:0Uploads:2 Thanks: 8 Thanked: 3 times in 1 posts]

#523018

That worked beautifully, thank you Leo for you fast and accurate help. Very much appreciated!
Naomi

[chaddng Friend chaddngJoin date: September 2013Posts: 12Downloads:0Uploads:2 Thanks: 8 Thanked: 3 times in 1 posts]

#528365

Hello again,
I’m back on the issue of the masshead title now being in a position to actually test it on different devices.

I put the code you suggested in custom.css and have made tiny modifications. It now looks like this:

/*Showing the Masshead descriptions on mobile view*/

/* phone title */
@media (max-width: 479px) {
.jamasshead .jamasshead-title {
font-size: 40px;
word-spacing:normal !important;

}
}
/* tablet title? */
@media (min-width: 480px) and (max-width: 767px) {
.jamasshead .jamasshead-title {
font-size: 50px;
word-spacing:normal !important;
}

.jamasshead .jamasshead-description h3 {
font-size: 20px;
}
}
@media (max-width: 979px) and (min-width: 768px) {
.jamasshead .jamasshead-title {
font-size: 50px;
word-spacing:normal !important;

}

.jamasshead .jamasshead-description h3 {
font-size: 20px;
}
}

The phone view is fine – landscape and portrait. The desktop view is fine. On my tablet (iPad) it’s not fine. In portrait mode all the text shows, but it is too small. In landscape mode I only see the first word (OUT) of the title, but the font is a better size.

Can you advise again please

You can see my test site at http://www.windmilldev.co.uk.

Thanks,
Naomi

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

#528392

Hi Naomi,

In previous css rules, I tried to display the masshead title on mobile landscape and table portrait with the same size. If you want to apply specific size for this element on tablet portrait, you can try to put following codes into the custom.css file:

@media (min-width: 600px) and (max-width: 767px) {
.jamasshead .jamasshead-title {
font-size: 50px;
word-spacing:normal !important;
}

.jamasshead .jamasshead-description h3 {
font-size: 20px;
}
}

Change the value until you get it perfect.

[chaddng Friend chaddngJoin date: September 2013Posts: 12Downloads:0Uploads:2 Thanks: 8 Thanked: 3 times in 1 posts]

#528473

Thanks again, it’s not perfect on the tablet – i also had to change the screen width pixel settings. If the text wraps onto another line it disappears behind the description.

But, I can see it all now (smaller than I’d like), so it’ll have to do.

1 user says Thank You to chaddng for this useful post

1. phong nam

[Author]

Posts