CODEWITHSUNDEEP
htmlcsswordpressweb-deployment
Im Shreyas
Im Shreyas

Reputation: 13

How to exclude a specific page from custom css in wordpress?

I have inserted a custom CSS code inside my theme settings to make the site images look better and aligned. All the pages work fine with a custom CSS view except the 'BLOGS' page. Blogs page don't require that custom CSS code, it looks fine in default CSS code. So basically I want to exclude the blogs page from my custom CSS

@media screen and (min-width: 800px) {

.video-fit video, .video-fit iframe, img.back-image, .image-cover img, .has-format img, .has-equal-box-heights .box-image img {
    right: 0;
    width: auto;
    height: 170px;
    bottom: 0;
    left: 0;
    top: 0;
    position: absolute;
    object-position: 50% 50%;
    object-fit: cover;
    font-family: 'object-fit: cover;';


}

This is my custom CSS code for the whole website which I have to exclude for the BLOGS page. Thanks...

Upvotes: 1

Views: 1708

Answers (1)

Howard E
Howard E

Reputation: 5639

You can just use the css :not(selector) since the BLOG page has class blog in the <body> tag.

If you want to include different pages, just use the same method, but look at the body tag for other page specific classes.

<body class="blog theme-YourThemeName woocommerce-js group-blog hfeed">

@media screen and (min-width: 800px) {

body:not(.blog) .video-fit video, body:not(.blog) .video-fit iframe, body:not(.blog) img.back-image, body:not(.blog) .image-cover img, body:not(.blog) .has-format img, body:not(.blog) .has-equal-box-heights body:not(.blog) .box-image img {
    right: 0;
    width: auto;
    height: 170px;
    bottom: 0;
    left: 0;
    top: 0;
    position: absolute;
    object-position: 50% 50%;
    object-fit: cover;
    font-family: 'object-fit: cover;';


}

Upvotes: 2

Related Questions