Issue
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...
Solution
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;';
}Answered By - Howard E Answer Checked By - Senaida (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.