[Resolved] Setting Custom Category Page Padding on Mobile

[Andres]

Hello,

How can I set the left and right padding on specific custom php category pages for mobile?

There are about 8 custom php category pages on our site. We wanted to adjust the left and right padding on all but three of them to prevent the content from going from edge to edge on mobile (on desktop, it’s fine).

I’ve included the URL for one of the category page in question.

Is this possible? How can it be done?

Thank you very much!

[David]

Hi there,

WordPress adds unique body classes to posts, pages and archives.
If you right click inspect your category archive in the body tag you will something like:

category-your-slug

In the case of your wedding resources category it is:

category-wedding-resources

And you can use it in your CSS like so:

.category-wedding-resources #content {
    padding: 40px;
}

[Andres]

Hello David,

Thank you very much. That did the trick!

One question. If I wanted to apply the same CSS to multiple categories, is it necessary to one of those for each category, or is it possible to include all the wanted categories in the same instance of CSS, in something like the CSS below?

.category-weddings .category-engagements .category-venues  #content {
    padding: 40px;
}

Again, many thanks, David.

Cheers!

Andrés

[David]

You have to add each CSS selector in full, separated by a comma , – Like so:

.category-wedding-resources #content,
.category-engagements #content,
.category-venues #content {
    padding: 40px;
}

[Andres]

Hi David,

Thank you!

Andrés

[David]

You’re welcome

[Author]

Posts