Jump to content
Sign in to follow this  
loiborg

Controlling the spacing for heading (H4)

Recommended Posts

loiborg    0
loiborg

Hi there.

 

On my website I have a page with my resume (CV). With the use of the span feature (span 3 to be exact) I'm listing a bunch of stuff in bullet points. As I have some boxes sections further down on the page I want the heading to match that. I found that using H4 gives the same size heading. Now unfortunately there's an awful lot of whitespace between the heading and the div/span (see image below). I've tried manipulating both the bottom margin, spacing and line-height of H4 as well as .row and .div in custom CSS. None of it worked. Therefore my question is:

 

How do I reduce the space between the <H4>-tag and the span itself.

 

<h4>Heading 4 (H4)</h4>
<div class="row">
<div class="span3">

 

zuqtly.png

Share this post


Link to post
Share on other sites
catrina    103
catrina

You can reduce the <h4> spacing reducing its padding with Custom CSS (added to PageLines > Site Options > Custom Code > LESS/CSS). For example:

 

 

h4 {padding: 0px;}

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
loiborg    0
loiborg

Hi Catrina,

 

Thanks for the quick reply. I have tried doing that but it didn't help. It seems like it might be linked with either the div or row tag.

 

This is a crop of what it looks like now. The padding code didn't really do anything other than what the code I already had in the LESS/CSS-field

 

This is the code on the page itself:

<h4>Den</h4>
<div class="row">
<div class="span6">Modern
</div>
<div class="span6">Text in second row
</div>
<h4>Det</h4>
<div class="row">
<div class="span3">
<ul class="icons">
  <li><i class="icon-rss"></i>Text</li>

 

 

Image of how it looks:

11l6bk5.png

 

CSS/LESS Rules:

body{}
h4 {
  font-size: 18.2px;
  margin-bottom: 0px;
  line-height: 0.3em;
  padding: 0px;
  }

.row {
  margin-top: 0;
  padding: 0px;
  }

.span3 {
  margin-top: 0;
  padding: 0px;
  }

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, you have a class in the span3 called icons which has the below attached to it. Edit the first figure to move up the text, 0.5em looked right in firebug - http://screencast.com/t/ZyFXaAv9X

 

.hentry ul, .hentry ol {
    margin: -0.5em 0 1.7em 1.7em;
    padding: 0;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • StuLeeUK
      By StuLeeUK+
      Good morning,
      I have set up my homepage using the Elements sections, a Masthead at the top and then a selection of Heroes lower down.
      I only just realised that the Heroes set a H1, as does the Masthead.
      Is there an easy way I can change the Heroes to an H2/H3 etc so as to improve the structure of my headers, whilst keeping the Masthead as H1?
      I really don't know much at all about CSS, which is why I use Pagelines because it's just so easy to create good looking pages without too much confusion.
       
      page for reference is https://www.avangocouriers.co.uk
      Thanks,
      Stu
    • Claudio
      By Claudio+
      I have a problem with the typography settings. I set the H1 class with "font-weight: 300;" (Very thin weight), and "font-size: 50px;" (To have considerable evidence of my problem). Unfortunately, as you can see on the screenshots, those setting don't have any incidence on the site, Infact in the home page editor there is a trial title called "Text test", bold, and 26 px approximatly sized.
      Why the typography settings are not transposed on the site? Where I wrong?


    • dawsonbarber
      By dawsonbarber+
      I just noticed that blog posts use <h2> for the post title. Custom post type posts also default to <h2>.
       
      I checked the source code on a number of posts and couldn't find any evidence of an <h1> tag.
       
      Just to see what would happen, I enabled Legacy mode, checked the source code, and saw that blog post titles and custom post type post titles were both wrapped in <h1> tags.
       
      What's the deal with this?
    • allanlove
      By allanlove+
      Hi
       
      Can someone please give me the custom css I need to change the size of the font used for the h1 tags without it affecting h2, h3, h4 etc?
       
      Thanks
       
      Allan 
×