Archive page custom CSS

Hi Althaf,

You can make your CSS more specific by adding a more specified class selector to it.

Example/s:

For post pages, you can try adding body.single.

For static pages, you can try adding body.page.

For archive pages, you can try adding body.archive.

Now with this, we can be more specific with our styling.

Say for example, I want to change the link color on the content area or post pages only.

I can do it like this:

body.post div#content a { color: red; }

or say for example, I want it to apply to all static pages and post pages, I can do it like this:

body.post div#content a, 
body.page div#content a { 
color: red; 
}

Or we can do styling with exclusion. (excluding archive pages)

body:not(.archive) div#content a { color: red; }

As for the unwanted spacing, are you pertaining to this? https://share.getcloudapp.com/WnuxXgD0

If so, that's coming from one of your custom CSS. It's this one.

@media (min-width: 1080px) {
    .separate-containers .inside-article {
  padding: 20px 20%;
    }
}

@media (min-width: 1080px) {
.separate-containers .comments-area {
  padding: 20px 20%;
    }
} 

The 20% value is too much. Try 20px.

Okay it worked!

Thanks for the help.

One more question: how can I increase the number of posts shown on the archive pages? Right now it is 10.

Hi there,

go to Dashboard > Settings > Reading and change the value in: Blog pages show at most