Search Results & Blog Category Pages - Featured Images Too Big

Support
#1

Hey there

So on the search results, blog and category pages it shows the portfolio & blog featured images as huge. How can I shrink them down when they display on these pages?

And will that let them follow the masonry style that I’ve set in the options?

#2

Hi Heather,

Thanks for writing in! You can add a CSS rule to target only featured images on those pages. For example, you can add the following CSS rule into your X -> Theme Options -> CSS area.

.search-results .entry-featured {
    width: 50%;
}
.single-post .entry-featured {
    width: 50%;
}
.single-x-portfolio .entry-featured {
    width: 50%;
}
.category .entry-featured {
    width: 50%;
}

Hope that helps.

#3

Hi

So that helped with the images but didn’t get the search results in masonry style like the category archives. Is there a way to make that possible?

And the category archives is looking a little weird.

Is there a way I can make them look more like this?

Thanks

#4

Hi again,

.category article {
    margin-right: 2%;
    border: 1px solid #eaeaea;
    padding: 10px;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}
.category .x-main {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!

#5

I’ve put in the css below, but if I put in multiple columns (2 or 3, or 4) the layout gets screwed up.

.search-results .x-main {
-webkit-column-count: 1; /* Chrome, Safari, Opera /
-moz-column-count: 1; / Firefox */
column-count: 1;
}

Ideally I’d like 4 columns, but when I try that, it comes out like this:

#6

Hi again,

For 4 columns you can use this code instead:

.search-results article {
    margin-right: 2%;
    border: 1px solid #eaeaea;
    padding: 20px;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    width: 23%;
    float: left
}

.search-results article:nth-child(4n + 1) {
    clear: both;
}

As you see this requires custom coding and the code provided above serves as a guide only and is to help you in getting started so further customization from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer.

Thanks you for understanding!

#7

this is nearly what I want but is it possible to limit the content word count please?

#8

Hi There,

You can change the excerpt length under Theme Options > BLOG > CONTENT > EXCERPT LENGTH:

Hope it helps :slight_smile:

#9

I tried that and it is ignoring me. I started a new thread about it

#10

Thanks for starting a new thread. :slight_smile: Posting on a thread started by a different user sometimes creates confusion which slows down the response time.

#11

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