Joomla Templates Club 406,261 posts

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#199583

Hello,
in this page: http://www.joomlart.com/demo/#ja_medicare

there are boxes for each department, the name in the demo site are short.
In the real life: in my site my departments name are long, so it showing …… after the limit.
How I can have the full name of the department to appear.
thanks,

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#541917

Aesthetically, you can either reduce the font-size (see example below):


.grid-view .item .article-title {
font-size: 11px;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}

or you can change have the text wrap by changing the same CSS rule (see below):


.grid-view .item .article-title {
font-size: 15px;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: wrap;
}

With either choice, the best thing to do is create a new file called custom.css within file path
–> /templates/ja_medicare/css <– and pasting either of the above two CSS rules within that custom.css file.

Hope That Helps.

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#541921

Hi TomC,

Thank you, it reduced the font size but It did not wrap the text.

.grid-view .item .article-title {
font-size: 11px;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: wrap;
}

Please help. thanks

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#541922

Actually, it was an either/or recommendation.

If you didn’t want to reduce the size of the font, then you could change the “wrap” property.

OR . . .

If you reduce the font-size, then you don’t need to worry about the word-wrap . . . . unless your “department titles” get any longer, of course. 😎

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#541923

Yah the name is very long lol
So I would like to wrap it, but when I inserted the code below, it did not wrap the text.

.grid-view .item .article-title {
font-size: 11px;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: wrap;
}

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#541924

I put </br> in the title but it did not work 😮

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#541925

Then this is the code you want . . . .

😎

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#541926

Thank you TomC,

I have inserted the code, but nothing happen yet:

http://www.horizonsolutions.ca/ciecsi/our-services/immigration

Thanks,

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#541928

<em>@okkhalid 436147 wrote:</em><blockquote>Thank you TomC,

I have inserted the code, but nothing happen yet:

http://www.horizonsolutions.ca/ciecsi/our-services/immigration

Thanks,</blockquote>

Do me a favor . . . temporarily set “Optimize CSS” to “Off” within your Template Manager–General settings

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#541929

I did. thanks

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#541930

Okay, I found the problem . . . .

Here is what you currently have within your custom.css file – line 19:


.grid-view .item .article-title {
font-size: 15px;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
}

Here is what you need . . .


.grid-view .item .article-title {
font-size: 15px;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: wrap;
}

😎

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#541931

that is strange,
I have inserted the code before, please check the snapshot

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#541932

<em>@okkhalid 436152 wrote:</em><blockquote>that is strange,
I have inserted the code before, please check the snapshot
</blockquote>

I just inspected your CSS – just now – and the “white-space: wrap;” property is still not included within the CSS (in your custom.css file).

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#541936

Hi TomC,

I have check with my ftp the custom.css for the full code, and its include the “white-space: wrap;”
Then I cleared the cash and flushed the site.

But nothing happened.

??:eek:

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#541987

Something is definitely wrong then – because when I inspect your site CSS live (via Firebug),
note/click the image below:

Notice – within the bottom right panel – the CSS rule in your custom.css file at line 19.
It is not showing the “white-space: wrap” property.

---

Attachments:

1. 

[Author]

Posts