How can I hide "Tags, Author Name at the top, Date and Comments from post?

Hello Team, I want to hide all of this on the Integrity stack.
And also read more buttons too.

Here is the URL of my blog post: https://learnmechanical.com/blog/
and please give me the CSS code so that I resize all of my thumbnail images in this blog masonry. (Note: Only change in blog masonry thumbnails, not in a single post featured image)

Thanks in advance.

Hey Saswata,

To hide the Read More button, please add this code in Theme Options > CSS.

.more-link {
    display: none;
}

The size of the thumbnail could not be edited using CSS. It would need overriding the x_featured_image which can be found in featured.php located in framework\functions\frontend folder of the theme. To override the function, just copy it to the functions.php of your child theme.

Please just note that we do not offer support for issues that result from customizations. For that, you’d need to consult with a third-party developer.

For a non-coding alternative, you can alternatively try using one of the bundled grid plugins as they have lots of post display options. Please visit the links below for more information:

If you have more questions, feel free to open separate threads for each. The reason why we recommend one issue per thread is so one support staff could focus on one issue at a time. Mixing topics in a thread also often result to confusion.

Hope that helps.

1 Like

Hello @christian_y,

yeah that CSS code work but only in desktop not in mobile devices, also I find some CSS code to hide “Tags, Date, and same size thumbnails” but all the CSS code work on desktop, but no effect in Mobile devices can you help with that?

I used these css to hide above things, all are work in desktop but no effect in mobile devices.
Please help me with that.

.single-post footer.entry-footer.cf {
display: none;
}
footer.entry-footer.cf {
display: none;
}
.post .entry-wrap .p-meta>span:nth-child(2) {
display: none;
}

.p-meta span:nth-child(4) {
display: none !important;
}

.p-meta > span:nth-child(3):after {
display:none;
}
.more-link {
display: none;
}
.x-masonry-active .entry-thumb img {
min-height: 220px;
max-height: 220px;
}
.search-results .entry-thumb img {
min-height: 270px;
max-height: 270px;
}

Hello Saswata,

You have this custom css code which is incorrect:

@media (min-width:979px){
    .search-results article{
        margin-right:2%;
        border:1px solid #eaeaea;
        padding:20px;
        margin-top:0 !important;
        margin-bottom:20px !important;
    }
    .search-results .x-main{
        -webkit-column-count:2;
        -moz-column-count:2;
        column-count:2;
    }
    blockquote{
        font-size:16px;
    }
    .single-post footer.entry-footer.cf{
        display:none;
    }
    footer.entry-footer.cf{
        display:none;
    }
    .post .entry-wrap .p-meta>span:nth-child(2){
        display:none;
    }
    .p-meta span:nth-child(4){
        display:none !important;
        @media (min-width:979px)
    }
    .p-meta > span:nth-child(3):after{
        display:none;
    }
    .more-link{
        display:none;
    }
    .x-masonry-active .entry-thumb img{
        min-height:220px;
        max-height:220px;
    }
    .search-results .entry-thumb img{
        min-height:270px;
        max-height:270px;
    }
    

The correct one should be:

@media (min-width:979px){
    .search-results article{
        margin-right:2%;
        border:1px solid #eaeaea;
        padding:20px;
        margin-top:0 !important;
        margin-bottom:20px !important;
    }
    .search-results .x-main{
        -webkit-column-count:2;
        -moz-column-count:2;
        column-count:2;
    }
    blockquote{
        font-size:16px;
    }
    .single-post footer.entry-footer.cf{
        display:none;
    }
    footer.entry-footer.cf{
        display:none;
    }
    .post .entry-wrap .p-meta>span:nth-child(2){
        display:none;
    }
    .p-meta span:nth-child(4){
        display:none !important;
    }
    .p-meta > span:nth-child(3):after{
        display:none;
    }
    .more-link{
        display:none;
    }
    .x-masonry-active .entry-thumb img{
        min-height:220px;
        max-height:220px;
    }
    .search-results .entry-thumb img{
        min-height:270px;
        max-height:270px;
    }
}

Now this code block is inside “@media (min-width:979px){}” which means that the code will only be applied to screen sizes bigger than 979 pixels. This will not be applied to the mobile screens.

Hope this explains the css above briefly.

1 Like

Thanks @RueNel

You are most welcome. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.