How to reduce padding/margin on content

Hey,

So I have two specific questions.

Question 1. How do I reduce the margin that appears towards the top of the containers on the main screen.

Here is the html I’ve used:

                  `<div  id="about"  class="shapely_home_parallax">        <section class="bg-secondary pb0">                 <div class="container">
            <divclass="row">

                  <div class="col-sm-10 col-sm-offset-1 text-justify">
                        <div class="text-center" ><h3 >About Us</h3></div><p class="mb32">Lorem Ipsum.. </p></div>
                  </div>

                  <!--end of row-->
                  </div>
          </div>
                  </section>

	</div>`

I used this html because I didn’t want the image to show up but needed the rest of the content to be as is with some text alignment.

But this gives that extra space towards the top of the title. Please help me reduce it, thanks.

Question 2. How do I reduce the margin/padding towards the bottom of the content on every page I make. It is a little too much as you can see in the attachment title ‘bottom margin’.

A lot of my questions were answered by searching the forum but I couldn’t find the answers to these. If you already have answered them, please point me towards those articles and I’ll read them.

Thanks a lot!

Hi @shardo,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other


body.page section.content-area {
    padding: 0;
}

Best Regards,
Movin

It has reduced by a bit but I’d like to reduce it a little more? Is there any way to do so?

The shared custom CSS code is working on my test site.

Could you please share me the page URL from your site where it is displaying so that i can troubleshoot it?

Hi @Movin,
I am trying to do the same on my website.
I’d like to shrink the space marked in RED on the attached picture.
I tried your code without any luck.

Thanks for your help.

The code of this section is as follow:

<div id=“shapely_home_features-3” class=“widget shapely_home_features”> <section>
<div class=“container”>
<div class=“row”>
<div class=“col-sm-12 text-center”>
<h3 class=“mb16”></h3>
<p class=“mb64”></p>
</div>
</div>
<!–end of row–>
<div class=“row”>
<div class=“col-sm-4”>
<div class=“feature feature-1”>
<div class=“text-center”>
<i class=“fa fa-mobile”></i>
<h4>Applications mobiles</h4>
</div>
<p>Soyez au plus près de vos clients <br>
<b>» Développez vos applications mobiles</b>

</p>
</div>
<!–end of feature–>
</div>
<div class=“col-sm-4”>
<div class=“feature feature-1”>
<div class=“text-center”>
<i class=“fa fa-check”></i>
<h4>Développement CRM pour PME</h4>
</div>
<p>Optimisez votre temps et votre argent <br>
<b>» Développez votre CRM</b> </p>
</div>
<!–end of feature–>
</div>
<div class=“col-sm-4”>
<div class=“feature feature-1”>
<div class=“text-center”>
<i class=“fa fa-code”></i>
<h4>Sites Webs</h4>
</div>
<p>La vitrine de votre entreprise <br>
<b>» Développez votre site web</b> </p>
</div>
<!–end of feature–>
</div>
</div>
<!–end of row–>
</div>
<!–end of container–>
</section>

	&lt;/div&gt;

@iann2000 This is old topic and to help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/shapely/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.