Site logo

Archived topic

Gap

5 replies · Started by Jatin on February 9, 2021

Viewing posts 1–6 of 6

How to reduce the gap as shown in the screenshot:

Hi Jatin,

You can go to Customizer > Container > Content Padding, to reduce the top padding.

Additionally there's a margin applied to the content, this CSS can remove the margin completely.

.single .inside-article .entry-content {
    margin-top: 0;
}

Let me know :)

Hi Ying that did worked on the desktop but the issue is mainly on the mobile phone. When you open any post in mobile phone the Gap seems / looks more. But I wont worry about desktop for now. Example link in the info box.

There are multiple things that contribute to this "gap".

One is the .entry-content's margin-top which can be addressed by adding this:

.entry-content {
    margin-top: 0px !important;
}

Another one is the weird empty header.entry-header before your .entry-content which can be addressed by this CSS:

header.entry-header {
    display: none;
}

But its good housekeeping to find out why this exists.

Lastly is .separate-containers .inside-article padding which can be addressed by adding this css:

@media(max-width:768px){
.separate-containers .inside-article{ padding-top: 0px !important; }
}

Thanks

No problem. :)

This archived topic is closed to new replies.