Search result image size, possible inline alignment

[VVT]

Hello support,

I am looking to have my search result images significantly smaller, and is there a way to have them inline with the snippet?

e.g.;
image|content
-not-
image
content

Reference link: https://vitalytennant.com/?s=v

I tried the following global CSS code:

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

and

.search-results .entry-featured a img {min-width: 60% !important; max-width: 60% !important; margin: 0 auto; display: block;}

.search-results .entry-thumb {background-color: transparent; margin: 0 auto; display: block;}

.search-results .entry-featured {border: 0; box-shadow: none;}

It doesn’t align properly because the image just sits above the content/snippet and I do not know if there is a way to have content aligned next to the image, if so, how can I do that?

Thank you in advance

[ruenel]

Hello @10tennantvitaly01,

Thanks for writing in! Your custom css code is incorrect. Do you want to have something like this?

If that is the case, please make use of this code instead:

@media(min-width: 980px) {
  .search-results .has-post-thumbnail .entry-featured,
  .search-results .has-post-thumbnail .entry-wrap {
      float: left;
  }

  .search-results .page .entry-featured, 
  .search-results .single-post .entry-featured {
      display: block;
  }

  .search-results .hentry,
  .search-results .has-post-thumbnail .entry-footer {
      clear: both;
      margin-bottom: 30px;
      display: block;
  }

  .search-results .hentry.has-post-thumbnail:after{
      content: "";
      height: 0;
      display: block;
      clear: both;
  }

  .search-results .hentry.has-post-thumbnail {
      background-color: white;
      padding: 60px;
      border-radius: 4px;
      box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
  }

  .search-results .entry-thumb img {
      min-width: 30%;
      max-height: 300px !Important;
  }

  .search-results .has-post-thumbnail .entry-featured{
      width: 25%;
  }

  .search-results .has-post-thumbnail .entry-wrap {
      width: 70%;
      padding: 0;
      float: right;
      border: none;
      box-shadow: none;
  }    
}

Please keep in mind that this code is only a guide to get you started with. Feel free to add more of your custom styling.

Also note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Thank you for your understanding.

[VVT]

Hello,

Thank you @RueNel

It works great!

Is there something I can do to remove the tags that show up underneath the posts?

I have this code:

.page .entry-featured,
.single-post .entry-featured {
display: none;
}

edit (never mind the above code, I believe it’s for the blog page)
for search results:

.search-results .page .entry-featured,
.search-results .single-post .entry-featured {
display: block;
}

I tried
display: none;
But the actual page images become removed, not the tags.

What am I missing to remove the tags from search results?

Thank you for your support

[Prasant]

Hello Vitaly,

Thanks for updating the thread.

Please add following CSS under X > Theme Options > CSS:

.search-results .has-post-thumbnail .entry-footer {
    display: none !important;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[VVT]

Hello,

That code works great.

Thank you @Prasant

[Prasant]

Glad to hear that.