Size of images on archive blog page for Integrity

[mizschmitty]

I have searched on the forum and tried different CSS snippets I found there and they aren’t working.

Since my client isn’t going to sell online but wants to maintain products themselves after the build-out, I want to use blog posts/categories for their products.

The single posts page images are great. I want to display the images on the blog category page as half their size (I’m uploading 400 square). The images actually look good on mobile, they are only too large on desktop. Can you help with the CSS for this?

https://www.crosscountrysupply.com/category/plastered/

[mizschmitty]

Along with this question, I want to decrease the amount of space between the nav and the page tiltle.

I want to edit this element, but don’t know where to find it. When I add this to global css or the customer css section or the child theme style.css there’s no effect.

.entry-wrap {
padding: 0%;
}

For my other question about CSS for the image size on the blog archive page, this is the element revealed in developer tools, I just don’t know where to find it to adjust the % or where to put/what code to use to override.
attachment-entry-fullwidth size-entry-fullwidth wp-post-image

[ruenel]

Hello @mizschmitty,

Thanks for writing in!

The custom CSS is valid and correct. It should be added in Cornerstone > Theme Options > CSS. Meanwhile, there is an on-going bug in your blog archive. You need to resolve this first. Please follow the suggestion #2 from this thread:

• Portfolio Sort not working

The image sizes is based on the width of the post item columns. At the moment, you have two columns only. If you switch to 3 columns, those images will become smaller. Please go to Cornerstone > Theme Options > Blog > Archive and change the number of columns.

If you want to have more columns or even smaller layout, since you are using the Pro theme, you can always go to Cornerstone > Layout Builder and create a custom archive layout for your blog index and archive pages. If you are not familiar with the Layout Builder yet, please check this first:

• https://theme.co/docs/layout-builder-overview
• https://www.youtube.com/playlist?list=PLWPh_GoP7hYWytkJcdcowJ8Zs6EDEdK18

Best Regards.

[mizschmitty]

Updated the JS with the code from #2 on the thread you sent. Thank you. Wasn’t aware of that issue, so not sure how to check that adding the code worked.

I’ve added the CSS to the Global CSS via Cornerstone and it’s not taking out the padding. I’ve checked Chrome and Safari after clearing the browser.

[ruenel]

Hello @mizschmitty,

This is now what I am seeing:

The images are smaller than 400 pixels to accommodate the 3 columns. It this enough or you want to change something more? Can you please elaborate the things you want to do to the images or on the page?

Cheers.

[mizschmitty]

Changing to 3 columns worked.

What’s not working is to remove the padding between the nav bar and page title. You said the CSS code I provided should work, but it’s not.

[ruenel]

Hello @mizschmitty,

The CSS code did not work because you have inserted it inside the @media CSS block:

@media (max-width:480px){
    .single-post .has-post-thumbnail .entry-featured{
        float:none;
        width:100%;
        margin-right:0;
    }
    .blog .x-main .hentry:first-of-type{
        padding-top:0;
        border-top:0;
    }
    .blog .x-container>.offset{
        margin-top:0;
    }
    .entry-wrap{
        padding:0%;
    }
    

Please have it updated and use this:

@media (max-width:480px){
    .single-post .has-post-thumbnail .entry-featured{
        float:none;
        width:100%;
        margin-right:0;
    }

    .blog .x-main .hentry:first-of-type{
        padding-top:0;
        border-top:0;
    }
    
    .blog .x-container>.offset{
        margin-top:0;
    }
}

.entry-wrap{
    padding:0%;
}

TIP: Use Indention, spacing, line breaks and new lines in your custom CSS code to make it neat and make easy to spot any errors like the unclosed curly brace.

Best Regards.

[mizschmitty]

Thank you!

[prakash_s]

Hello @mizschmitty,

Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns.

Thanks