Adjust leading on a single line

  • erayxibitz

    (@erayxibitz)


    8 years, 11 months ago

    I am relatively new to WordPress/code but learning.

    I have a list with icons in front of each item one list entry takes up two lines. I would like to adjust the leading of only this one list item of text to make them closer. Here is a link to the page. The item I am referring to is the market list at the top right.

    This is my current code that needs altering:
    <a href="http://www.xibitz.com/higher-education"> <img src="http://www.xibitz.com/wp-content/uploads/2013/10/education.png" alt="" width="20" height="20" /></a><a href="http://www.xibitz.com/higher-education"> Higher Education <br> <t style="padding-left: 23px;"> & Athletics</t></a>

    This is what I have tried, which is not the correct. It moves the two lines closer together but below the icon:
    <a href="http://www.xibitz.com/higher-education"> <img src="http://www.xibitz.com/wp-content/uploads/2013/10/education.png" alt="" width="20" height="20" /></a><a href="http://www.xibitz.com/higher-education"><p style="height:15px;"> Higher Education <br> <t style="padding-left: 23px;"> & Athletics</t></p></a>

Viewing 11 replies - 1 through 11 (of 11 total)
  • Pioneer Web Design

    (@swansonphotos)

    8 years, 11 months ago

    Why not have the column layout for this upper section fourth-fifth (left column) and one-fifth (right column) become two_third and one_third respectively (like the lower section) and then remove the line break:

    <a href="http://www.xibitz.com/higher-education"> <img src="http://www.xibitz.com/wp-content/uploads/2013/10/education.png" alt="" width="20" height="20" /></a><a href="http://www.xibitz.com/higher-education">Higher Education and Athletics</a>

    (unless you MUST use ‘&’ in HTML, don’t.)

    Thread Starter erayxibitz

    (@erayxibitz)

    8 years, 10 months ago

    The top of the page is currently broke into fifths. Any thoughts on how to adjust the leading of individual lines?

    In this instance the ‘&’ is preferred for consistancy as we use it in “A&D Community”, which is the common way of representing it in the industry.

    rollingWolf

    (@rollingwolf)

    8 years, 10 months ago

    I cant figure out what youre trying to do but you shouldnt use & like Pioneer says. Replace the & with & amp; (without the space between the & and amp;) instead

    Thread Starter erayxibitz

    (@erayxibitz)

    8 years, 10 months ago

    My code on the website does have the “& amp;” (with out the space). I’m not sure why it showed up as “&” when I copy pasted it to the forum.

    If you go to our website I am trying to adjust the leading on the list item “Higher Education & Athletics” so that “& Athletics” is closer to “Higher Education”.

    Thread Starter erayxibitz

    (@erayxibitz)

    8 years, 10 months ago

    rollingWolf

    (@rollingwolf)

    8 years, 10 months ago

    solve it with css’s line-height

    Thread Starter erayxibitz

    (@erayxibitz)

    8 years, 10 months ago

    I’m not familiar with css’s line-height. I’m pretty new at html too.

    I believe the page I’m editing is all in html. Can css be added to html?

    Below is the code for the top half of the page (minus the image slider). I just need the line-height changed for the “Higher Education & Athletics” entry. The rest is all good.

    (NOTE: the & are actually & amp; w/o the space.)

    `[four_fifth]
    <h1 class=”color mb”>Sports</h1>
    <p class=”big-paragraph”>The business of sports extends far beyond the excitement of the race, meet, match, game or tournament. There is much that happens in the so-called behind-the-scenes action. A well-designed and -executed space can make a big difference in promoting a program’s strengths.</p>
     
    <p class=”big-paragraph”>Our collaborations with athletic organizations help these clients turn the energy and tradition of their programs into branded athletic experiences that inspire pride and commitment, share stories of championships and sportsmanship, and promote competitive advantages that differentiate the program to recruits, athletes, alumni and visitors.</p>
     
    <p class=”big-paragraph”>Xibitz is a proven partner – delivering innovative and creative solutions.
    Please contact us to discover the depth and breadth of our projects and expertise.</p>
    <code></code>
    <code></code>
    <p class=”big-paragraph”><strong><span style=”font-size: small;”><a title=”Expertise” href=”http://www.xibitz.com/expertise/”>Learn more about our Expertise:
    Financial | Planning | Management | Design | Preproduction & Production | Installation</a></span></strong></p>
    [/four_fifth]
    [one_fifth_last]
    <code></code>
    <span style=”color: #60a2db; font-size: medium;”>Choose a Market
    to Learn More</span>
    <div class=”segments”><a href=”http://www.xibitz.com/museum”&gt; <img src=”http://www.xibitz.com/wp-content/uploads/2013/10/museum1.png&#8221; alt=”” width=”20″ height=”20″ /></a><a href=”http://www.xibitz.com/museum”&gt; Museums
    </a><a href=”http://www.xibitz.com/corporate”><img src=”http://www.xibitz.com/wp-content/uploads/2013/10/corporate1.png&#8221; alt=”” width=”20″ height=”20″ /></a><a href=”http://www.xibitz.com/corporate”&gt; Corporate
    </a><a href=”http://www.xibitz.com/healthcare”><img src=”http://www.xibitz.com/wp-content/uploads/2013/10/healthcare1.png&#8221; alt=”” width=”20″ height=”20″ /></a><a href=”http://www.xibitz.com/healthcare”&gt; Healthcare</a>
    <a href=”http://www.xibitz.com/higher-education”&gt; <img src=”http://www.xibitz.com/wp-content/uploads/2013/10/education.png&#8221; alt=”” width=”20″ height=”20″ /></a><a href=”http://www.xibitz.com/higher-education”&gt; Higher Education <br> <t style=”padding-left: 23px;”> & Athletics</t></a><a href=”http://www.xibitz.com/sports”><img src=”http://www.xibitz.com/wp-content/uploads/2013/10/sports1.png&#8221; alt=”” width=”20″ height=”20″ /></a><a href=”http://www.xibitz.com/sports”&gt; Sports
    </a><a href=”http://www.xibitz.com/a-and-d-community”><img src=”http://www.xibitz.com/wp-content/uploads/2013/10/adcommunity.png&#8221; alt=”” width=”20″ height=”20″ /></a><a href=”http://www.xibitz.com/a-and-d-community”&gt; A&D Community</a></div>
    <code> </code>
    <a href=”http://www.xibitz.com/contact/”&gt; <img src=”http://www.xibitz.com/wp-content/uploads/2013/12/lets_talk.png&#8221; alt=”” /></a>
    [/one_fifth_last][divider ]`

    Pioneer Web Design

    (@swansonphotos)

    8 years, 10 months ago

    First, check theme or plugin documentation on use of these shortcodes. The output classes use underscores, not hyphens), but the shortcodes may or may not follow that.

    Then, edit the shortcodes for the sections referenced, for example:

    [four_fifth]

    becomes

    [two_third]

    and

    [one-fifth_last]

    becomes

    [one_third_last]

    (make sure sure to edit the closing ones also. [/shortcode]

    Then you can correct the other HTML also as I noted (and use the & as you have been correctly doing) to get it all on one line.

    Thread Starter erayxibitz

    (@erayxibitz)

    8 years, 10 months ago

    Thanks Pioneer Valley Web Design for the suggestion – I have tried the page laid out in thirds instead of fifths but it visually doesn’t look good with the one line that much longer than the rest. It creates a lot of white space on the pages right edge and makes the page feel unbalanced.

    I will keep it as is with the large leading between the category “higher education & athletics” until I can find a solution for tightening up the leading in this location.

    Pioneer Web Design

    (@swansonphotos)

    8 years, 10 months ago

    The problem is there is not enough room in the one-fifth column for the string of text you want to be on one line. So you need to widen the one-fifth column or use a shorter string. Maybe one-fourth’s? Or, use some custom CSS for this section to edit the widths. The shortcodes are just including the CSS classes which are predefined but can be targeted/redefined as needed.

    Hope this helps.

    Thread Starter erayxibitz

    (@erayxibitz)

    8 years, 10 months ago

    Thank you for all of your suggestions Pioneer Valley Web Design, however in case there was confusion, I do not want the string of text all on one line, I want it on two.

    Example of current look (exaggerated):

    Higher Education
     
      & Athletics

    Example of desired look (but tighter/less space) :

    Higher Education
    & Athletics

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Adjust leading on a single line’ is closed to new replies.