Need some html help

ron_jeremy

See webpage here: http://104.131.149.147

Am trying to add a little extra vertical space between H2 and the 2 icons so they are spaced the same distance as between H2 and H1.

Here is the code as is:

<header id="site-head" {{#if @blog.cover}}style="background-image: url({{@blog.cover}})"{{/if}}>
    <div class="vertical">
        <div id="site-head-content" class="inner">

        {{#if @blog.logo}}<a id="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt=$
        <h1 class="blog-title">{{@blog.title}}</h1>
        <h2 class="blog-description">{{@blog.description}}</h2>
        <a class="fa fa-comments fa-2x"></a>
        <a class="fa fa-envelope fa-2x"></a>
     </div>
</div>

I have tried adding the following code to H2:

padding-bottom: 10px;

but it does not work either because the syntax is wrong or I am not inserting it properly.

Any help would be greatly appreciated.

meetdilip

ron_jeremy

In screen.css line 143

h2 {
    font-size: 4rem;
    line-height: 1.2em;
    letter-spacing: -1px;
    text-indent: -2px;
    padding-bottom: 50px;
}

ralphskie

padding-bottom does work, use browser inspector to test.
test

ron_jeremy

ralphskie Thanks for offering to help! Where exactly do I insert padding-bottom in the code example I showed in my original post?

meetdilip

@ron_jeremy

simply go to screen.css file, find line 143, find h2 and add

padding-bottom: 50px;

after text-indent: -2px;

PS : I noticed you added the code altogether

ron_jeremy

meetdilip I do not see a screen.css file in any of the directories. The code in my original post is from the default index.hbs file. All I want to do is add the

padding-bottom

code to H2 but cannot figure out where exactly to insert it.

ralphskie

check again here is the location 104.131.149.147/assets/css/screen.css

meetdilip

You can add it as inline css

ie,

 <h2 class="blog-description" style="padding-bottom: 50px;">{{@blog.description}}</h2>

ron_jeremy

meetdilip I added your modification but now the icons are on the same line:

 <h1 class="blog-title">{{@blog.title}}</h1>
            <h2 class="blog-description" style="padding-bottom: 5px;">{{@blog.description}}</h2}>
            <a class="fa fa-comments fa-2x"></a>
            <a class="fa fa-envelope fa-2x"></a>
            <i id='header-arrow' class="fa fa-"></i>
        </div>
    </div>

meetdilip

Try this

<h1 class="blog-title">{{@blog.title}}</h1>
            <h2 class="blog-description" style="padding-bottom: 50px;">{{@blog.description}}</h2>
            <a class="fa fa-comments fa-2x"></a>
            <a class="fa fa-envelope fa-2x"></a>
            <i id='header-arrow' class="fa fa-"></i>
        </div>
    </div>

ron_jeremy

meetdilip You, my friend, are a gentleman and a scholar.

meetdilip

ron_jeremy

Happy it got fixed ?