skip to Main Content

I have used CSS below to remove the title and some padding but there is still padding that I can’t seem to remove.

This is my current coding:

    .site-info { display: none; }
header.entry-header {
    display: none;
}
.page .post-header {
    display: none;
}

On Inspect it states

<div id="content" class="site-content" style="padding-top: 2.5em;

Can anyone help me please?

3

Answers


  1. The padding is being set somewhere else content is a common id tag in a stylesheet- you can override it.

    <style>
     body #content{
       padding:0px;
     }
    </style>
    

    if that doesn’t work, this will

    <style>
     body #content{
       padding:0px !important;
     }
    </style>
    
    Login or Signup to reply.
  2. The padding is being inherited from somewhere else. Either default browser settings, or one of your other divs/elements. You can use the id of the div, or the class, in CSS to manually change it like so:

    #content, .site-content {
     padding-top: 0px;
    }
    

    You can try just using the id tag or the class tag to see which one specifically is causing the padding inheritance. Would have to see more code/the site to be sure.

    Login or Signup to reply.
  3. <div id="content" class="site-content" style="padding-top: 2.5em;
    

    Aren’t you getting paddimg from here? The inline style. Inline elements have higher order than internal or external css

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search