Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • okkhalid Friend
    #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,


    1. no-complete
    TomC Moderator
    #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
    #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
    #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
    #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
    #541924

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

    TomC Moderator
    #541925

    Then this is the code you want . . . .

    😎

    okkhalid Friend
    #541926

    Thank you TomC,

    I have inserted the code, but nothing happen yet:

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

    Thanks,

    TomC Moderator
    #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
    #541929

    I did. thanks

    TomC Moderator
    #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
    #541931

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


    1. Capture
    TomC Moderator
    #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
    #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
    #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.


    1. screenshot
Viewing 15 posts - 1 through 15 (of 21 total)

This topic contains 21 replies, has 2 voices, and was last updated by  okkhalid 10 years, 3 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum