Remove the spaces from the body

  • Unknown's avatar
    kasishhumayun · Member ·

    hi, can you please guide me how can i remove spaces from the body of my website, its the ads been posted and few widgets and posts, i would like to remove the spaces between them, please guide me where and how can i do it in CSS coding.

    thank you.

    The blog I need help with is: (visible only to logged in users)

  • eurello · Staff ·

    Hi there,

    Can you please provide a bit more detail about what you’d like to do? I’m not sure which spaces you want to decrease.

    We’ve got a great series on the Daily Post teaching our users basic CSS. You should check these out! They’re a big help:

    http://dailypost.wordpress.com/2013/06/21/css-intro/
    https://dailypost.wordpress.com/2013/07/25/css-selectors/

    Intro to CSS: Previewing Changes with the Matched Rule Pane

  • Unknown's avatar
    designsimply · Member ·

    I checked your site and found the latest post at http://alostouramagazine.com/2014/09/04/russian-styling-by-a-la-russe/

    I noticed that the recent posts widget in the sidebar has a lot of extra space below it. One way to remove that space would be to decrease the bottom margin below just that one widget using an ID selector in CSS.

    To find the unique identifier, or ID selector, for that widget, you can use this method:
    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    I created an example that sets the bottom margin for the recent posts widget to zero so you can try it out:

    #recent-posts-3 {
	margin-bottom: 0;
}

    You can adjust the 0 value to something else such as 2em if you want to change the amount of space.

    I also noticed you have a text widget just below that with some Instagram code with inline CSS that is making the Instagram badge look misaligned:

    <div style="height:0;"><a href="http://instagram.com/al_ostoura?ref=badge" class="ig-b-ig ig-b-32" target="_blank">
<img src="//badges.instagram.com/static/images/ig-badge-view-24.png" alt="instagram" style="margin-bottom:-151px;margin-right:184px;" /></a>
</div>

    Updating to this may help:

    <div style="text-align: center; padding: 1em 0"><a href="http://instagram.com/al_ostoura?ref=badge" class="ig-b-ig ig-b-32" target="_blank">
<img src="//badges.instagram.com/static/images/ig-badge-view-24.png" alt="instagram" scale="0"></a>
</div>

    Then add this to your Appearance > Customize > CSS editor to remove the extra space below that widget:

    #text-6 {
	margin-bottom: 0;
}

    As you can see, removing space from around some elements such as widget requires that you know how to use your browser tools to find the correct CSS selector to use. Hopefully the examples above will give you a good start for adjusting spacing in other areas.

  • The topic ‘Remove the spaces from the body’ is closed to new replies.