Intro centering/spacing issue

  • Posted in : Readme
  • jimtron
    Participant

    When adding the rotating text, the alignment and spacing gets weird.

    Check this page: http://www.piccoach.com/test-intro/

    In the second example, if you scroll down a bit, the headline, photo, and tagline are nicely centered and spaced. But after adding rotating text, there is too much vertical spacing, and the rotating text line is off center. Please help me keep the spacing tight and everything centered. Thanks.

    Here is all of the code for that page (both intros):

    Pic Coach
    [intro]Friendly, expert help with: [rotate_words titles="shooting better portraits, taking better pictures with your smartphone, improving your portraits, deciding which camera to buy, setting up a home studio, making flash pictures look great "]
    [intro image="http://www.piccoach.com/wp-content/uploads/2014/11/jn-bw-600px-original.jpg"]One-to-one photography training and workshops,
    in Los Angeles and beyond
    [/intro]

    [section_title text=""]
    Pic Coach
    [intro image="http://www.piccoach.com/wp-content/uploads/2014/11/jn-bw-600px-original.jpg"]One-to-one photography training and workshops,
    in Los Angeles and beyond
    [/intro]

    [section_title text=""]

    ahmetsali
    Keymaster

    Hi, you can try this custom css code;

    .rotate-words {
        display: block;    text-align: center;    width: 100%;    min-width: 100%;    position: relative;
    }
    .rotate-words span {
        display: block; text-align: center; width: 100%;
    }
    .intro {
        padding-bottom: 1em;
    }
    
    jimtron
    Participant

    The centering is much better, and I like having the rotated text on a new line, but I’m still getting extra vertical space–is there a way to get rid of that? I’m trying to avoid extra whitespace in the intro (top intro); would like to have spacing similar to the second intro on this page:

    http://www.piccoach.com/test-intro/

    Pic Coach
    [intro]Friendly, expert help with: [rotate_words titles="shooting better portraits, taking better pictures with your smartphone, improving your portraits, deciding which camera to buy, setting up a home studio, making flash pictures look great "]
    [intro image="http://www.piccoach.com/wp-content/uploads/2014/11/jn-bw-600px-original.jpg"]One-to-one photography training and workshops,
    in Los Angeles and beyond
    [/intro]

    [section_title text=""]
    Pic Coach
    [intro image="http://www.piccoach.com/wp-content/uploads/2014/11/jn-bw-600px-original.jpg"]One-to-one photography training and workshops,
    in Los Angeles and beyond
    [/intro]

    [section_title text=""]

    ahmetsali
    Keymaster

    Hi again, i see some empty html elements(h2 and br) in your first intro shortcode, switch to Text tab of your content and remove these empty elements and spacing should be fine.

    jimtron
    Participant

    I don’t see the empty tags…

    Here’s the code again, pasted from the “text” tab (not the visual tab):

    Pic Coach
    [intro]Friendly, expert help with: [rotate_words titles=”shooting better portraits, taking better pictures with your smartphone, improving your portraits, deciding which camera to buy, setting up a home studio, making flash pictures look great “]
    [intro image=”http://www.piccoach.com/wp-content/uploads/2014/11/jn-bw-600px-original.jpg”%5DOne-to-one photography training and workshops,
    in Los Angeles and beyond
    [/intro]

    page: http://www.piccoach.com/test-intro/

    ahmetsali
    Keymaster

    ok then try this custom css code;

    .intro h2:empty {
        display: none;
    }
    
    jimtron
    Participant

    That helps, thanks.

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

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register