Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #21696

    On tablets—in ‘portrait’ orientation—the ‘ajaxed’ portfolio title gets ‘chopped off’ sometimes when the word is too long

    Examples:

    http://www.4vis.com/AjaxedPortfolioTitle-ChoppedOff-1.jpg

    (Should read: “MediaScreen 2 Outdoor” — the “n” is getting chopped off)

    http://www.4vis.com/AjaxedPortfolioTitle-ChoppedOff-2.jpg

    (Should be “Miscellaneous” — “us” gets chopped off)

    They come from this page:

    http://visualimpactsystems.com/trade-show-outdoor-displays/

    (Click on “MediaScreen 2 Outdoor” or “Miscellaneous”)

    Can the title size be “responsive”? (change based on the width of the screen), or can you tell me how to made it smaller? (“h1.ajax-portfolio-title”)

    Thanks,

    Mark

    #112760

    The problem is the characters you have in a given word won’t simply wrap. CSS text-wrap is not supported in major browsers. The easiest thing to do is rename the title. Which, most likely, is not an option which brings me to the next solution.

    You can write to layout.css located in the /css directory. But, any updates to the theme from the author will overwrite these changes. You can either remember to add them back or create a custom.css file. However you decide, the following should help-

    Layout.css around line 2399:

    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    @media only screen and (min-width: 480px) and (max-width: 767px) {
    .ajax-control a { width: 138px;}
    }

    Add the following:

    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    @media only screen and (min-width: 480px) and (max-width: 767px) {
    .ajax-control a { width: 138px;}
    #top .ajax-portfolio-title { font-size: 30px; }
    }

    Between 480px and 767px the ajax portfolio title class will be 30px. This will take care of the truncated ‘n’ by making the font size smaller. Small than the 479px the layout is rendered differently so there’s no need to copy the above into the mobile section.

    #112761

    Hey Mark,

    The solution posted by rabx is dead on. You can also add the css to your custom.css file to just overwrite those in the layout.css file which will then keep it easier to backup.

    Regards,

    Devin

    #112762

    Hi,

    I agree with the solution provided by rabx.

    @media only screen and (min-width: 480px) and (max-width: 767px) {
    #top h1.ajax-portfolio-title {
    font-size: 2.3em;
    }}

    Please add the above block of code to your custom.css file or to Quick CSS located in Theme Options > Styling.

    To see the changes on all screen sizes. Use the code below instead

    #top h1.ajax-portfolio-title {
    font-size: 2.3em;
    }

    Thanks,

    Nick

    #112763

    All,

    It is a bit big anyhow, so what would be the code to put in the custom.css to make it smaller? (Then we can determine if we need to put the mobile code in, too).

    Thanks,

    Mark

    #112764

    Hi,

    I am sorry. The code provided in the above posts with instructions to put it in custom.css created a font size too small? I made changes to my answer above whereby the second css block changes font sizes for all screen size.

    Thanks,

    Nick

    #112765

    Nick,

    We wanted to make the font size for all screen sizes a bit smaller, so I put this in the custom.css:

    #top h1.ajax-portfolio-title {

    font-size: 1.5em;

    }

    …and it is no smaller than yours at 2.3em.

    Suggestions?

    Mark

    #112766

    Hi,

    Hmm. My suggestion is to clear your browser cache :

    1.5em : http://i.imgur.com/EI2ZI5U.png (from your live site custom.css as it looks to me)

    2.5em : http://i.imgur.com/GaWywRz.png (change on your live dom)

    :)

    Thanks,

    Nick

    #112767

    Nick,

    Shame on us! (Thought we had done that!).

    You’re a ‘wizard’! Thanks for being so patient with us ‘designers’.

    Mark

    ISSUE CLOSED.

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Angular – "Ajaxed" Portfolio Title 'Chopped Off'’ is closed to new replies.