Jump to content


Photo
- - - - -

Changing line height

line-height change

Best Answer rcpessemier , 04 February 2014 - 03:48 PM

Added this to manage line height.

<div style="line-height: 18px;">
    <span style="font-family: verdana, geneva, sans-serif; font-size: 14px; line-height: 14px;">During the discovery phase of the MCOP project, the project team examined existing documentation for MCOP requirements and conducted a thorough market analysis. &nbsp;In addition, the team gathered requirements from individuals and organizations targeted for MCOP implantation and surveyed stakeholders to establish priorities for the MCOP platform.</span>
</div>

Go to the full post


  • Please log in to reply
6 replies to this topic

#1 rcpessemier

rcpessemier

    Member

  • Members
  • PipPip
  • 14 posts
  • Country: Country Flag

Posted 03 February 2014 - 09:58 PM

How do I change the text line height in the custon less/css area? I have messed wiht this for hours and can't get anything to work.

Thx



#2 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 04 February 2014 - 12:01 AM

hello @rcpessemier

 

can we have a link to your site and examples of the code you have tried please? 



#3 rcpessemier

rcpessemier

    Member

  • Members
  • PipPip
  • 14 posts
  • Country: Country Flag

Posted 04 February 2014 - 03:23 AM

Staging site is http://biz117.inmoti...pte5/psmcop.org

 

I am in this neighborhoos

.fulltabs.tabs-ugykhp .tab-pane.well.tab-ugykhp-131 {
    background-color: #D8D8D8;
    color: #000000;
}
 
and
 
<span style="font-family:verdana,geneva,sans-serif;">The Maritime Common Operating Picture (MCOP) project team conducted a discovery phase that included:</span>
 
I want to have less spce above and below the first line in the tab MCOP Overview and be able to control line height better throughout the site.


#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 16376 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 04 February 2014 - 10:26 AM

Where exactly on your homepage are these tabs, I don't see any ?

 

If you want to reduce space above/below elements, you will want to use custom CSS. I recommend inspecting the element(s) with Google Chromes Dev Tools where margin is displays as a orange color and padding as green. Then inspect the element where the margin/padding is coming from and use custom CSS to remove or reduce it.

 

In regards to line height, do the same as above, inspect the element you want to increase the line height of and add your own value. Then add this to you custom CSS. For assistance with customizing DMS see our documentation - http://docs.pageline...ow-to-customize



#5 rcpessemier

rcpessemier

    Member

  • Members
  • PipPip
  • 14 posts
  • Country: Country Flag

Posted 04 February 2014 - 03:47 PM

I added this and it seems to work.

<p style="margin-bottom: 0px; margin-top: 5px;">
    <span style="font-size:14px;"><span style="font-family:verdana,geneva,sans-serif;">The Maritime Common Operating Picture (MCOP) project team conducted a discovery phase that included:</span></span>
</p>



#6 rcpessemier

rcpessemier

    Member

  • Members
  • PipPip
  • 14 posts
  • Country: Country Flag

Posted 04 February 2014 - 03:48 PM   Best Answer

Added this to manage line height.

<div style="line-height: 18px;">
    <span style="font-family: verdana, geneva, sans-serif; font-size: 14px; line-height: 14px;">During the discovery phase of the MCOP project, the project team examined existing documentation for MCOP requirements and conducted a thorough market analysis. &nbsp;In addition, the team gathered requirements from individuals and organizations targeted for MCOP implantation and surveyed stakeholders to establish priorities for the MCOP platform.</span>
</div>



#7 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 05 February 2014 - 12:56 AM

Glad you managed to resolve, thank you for updating the thread. The method you've used is inline css, which works. But for reference the correct way would be to use the css/less panel in the DMS control panel or via a child theme. Examples below.

 

.section-fulltabs .fulltabs .tab-content p {
    line-height: 10pt;
    padding-left: 0;
}
 
The above would control the line height for the text in the section.
 
.well {
    padding: 19px;
}
 
The code above controls the padding inside the tab. http://screencast.com/t/qg1bZ3p5






Also tagged with one or more of these keywords: line-height, change