Jump to content

Archived

This topic is now archived and is closed to further replies.

primetime

h1 margin-bottom on pages

Recommended Posts

primetime

I'm trying to decrease the H1 bottom margin on my page using inline CSS. I already have the the margin reduced for H2 and so on via the custom CSS/LSS. 

I only want to decrease the H1 bottom margin on this page and leave the blog posts alone hence the reason why I'm using the inline CSS. Any idea how to do this? I couldn't figure out the right code.

http://travelblogfest.com/increase-your-travel-blog-traffic/

Share this post


Link to post
Share on other sites
Aires

Hi, 

The best way to handle this would be to use the text (not visual) part of the editor and add a class to it so that you could target that h1 element with out affecting the others.

<h1 class="yourclasshere">text here</h1>

then add this to your css

.yourclasshere h1 {

margin-bottom: 5px;

}

Aires


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Danny

I wouldn't recommend using inline CSS, as it gets annoying to manage. I would recommend using CSS like @​Aires suggested above. However, if you wish to remove the bottom margin completely, you can use the built-in utility classes in DMS.

For example:

zmb = zero margin bottom
zmt = zero margin top

You can use these classes like so:

<h1 class="zmb">This header has no margin at the bottom</h1>
<h1 class="zmt">This header has no margin at the top</h1>

You can also use custom CSS and add these classes to your headers.

/* Margin top control */
margin-top-5 { margin-top: 5px; }
margin-top-10 { margin-top: 10px; }
margin-top-15 { margin-top: 15px; }

/* Margin bottom control */

margin-bottom-5 { margin-bottom: 5px; }
margin-bottom-10 { margin-bottom: 10px; }
margin-bottom-15 { margin-bottom: 15px; }

Then simply add those classes names to your header elements like so:

<!-- Margin top HTML control using the classes mentioned above -->
<h1 class="margin-top-5">This header has margin top of 5px</h1>
<h1 class="margin-top-10">This header has margin top of 10px</h1>
<h1 class="margin-top-15">This header has margin top of 15px</h1>

<!-- Margin bottom HTML control using the classes mentioned above -->
<h1 class="margin-bottom-5">This header has margin bottom of 5px</h1>
<h1 class="margin-bottom-10">This header has margin bottom of 10px</h1>
<h1 class="margin-bottom-15">This header has margin bottom of 15px</h1>

If you wish to remove the margin top/bottom of an element such as a title in a section, you will need to override the default CSS that is applied. To do this, simply inspect the element using Chromes dev tools or a similar tool. However, I would recommend Chromes devtools as it is in my opinion the better than its competitors. Locate the class name that is applying the margin to that element then use that class name in your own CSS.

For example, let's say you're using a TextBox section and have added a title via the title field. The TextBox title inherits the default CSS for headers which uses:

margin: .4em 0;

To override this, simply target the h2 in the TextBox section which you can do like so:

#site .section-textbox h2 {
  margin-bottom: 25px;
}

This will override the margin-bottom on all TextBox titles.

You can even go further and style sections on a per section basis, by either using the unique ID for each section or by using the styling classes field option. To use the ID, simply inspect the section using Chrome dev tools and prefix your CSS with that ID like so:

#sectionIDhere .section-textbox h2 {
  margin-bottom: 25px;
}

For the styling classes field, simply add a class name to the field and then prefix your CSS rule with that class name. Let's say you use the following:

.textbox-title-large-margin h2 {
  margin-bottom: 55px;
}

Now go to a TextBox section and add this to the styling classes field option. Upon save, your TextBox title should have a margin-bottom of 55px.

 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
primetime

Brilliant, it worked. I used Aires suggestion.

Share this post


Link to post
Share on other sites
Danny

No problem and thanks for informing us the issue has been resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×