Docs

[argonstudios]

Hello,

I have reviewed the forums, the pages on views and on css index.

I need to get my search page results to look more like products in the shopping cart rather than a list of blog posts.

Can you review my css and tell me how to clean up this look:
http://www.economycandy.com/?s=bears

Thank you.

[Christian]

Hey there,

Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[argonstudios]

Christian,

I think I almost have it, but just need a little assistance if you can with my CSS. I keep getting a second row that just looks a little off.

I am using:

.woocommerce .site {background-color: #FAEBFA;}
.search-results .entry-featured {
width: 75%;
}
.search-results article {
    display: block;
      float: left;
    width: 25%;
  padding: 20px;
}
.p-meta {
  display: none;
}
.x-main {
  width:100%;
}
.entry-header, .entry-content {
  font-size:14px;
  overflow:hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

Can you give me some advice on this CSS to get the layout that I am looking for here please? If you search “BEAR” at http://www.economycandy.com/?s=bear, you will see what I am talking about.

[Jade]

Hi there,

Would you mind specifying what is off on the second row on the results page?

I checked it and they seem to look correct except the titles are getting cut off.

You can try to add this CSS for that:

.search-results .entry-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[argonstudios]

Jade,

Thank you.

I was limiting the title on purpose, but I exchanged my css for yours and I like it much more. Thank you.

Tell me, my client has one further request on the search results that I just can’t seem to get under control.

1. They would like the titles on the top of the product rather than the bottom. Is there a way via css that we can move this entry-title?

Any help you can give me with the CSS code is appreciated.

Shannon

[argonstudios]

Jade,

Sorry, I completely forgot, the search results look good, but when you look at the 3rd row it only displays (1) product for any category that is searched that has more than 8-10 products in it.

Anything we can do to fix this with css?

[Thai]

Hi There,

Please try adding the following CSS:

.search-results h2.entry-title {
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

http://i.imgur.com/PaEXF1q.png

Hope it helps 🙂

[argonstudios]

Oh, I actually worded that complete the opposite of what I needed Thai. I need the titles to be on the bottom as they are already on the top.

Can you have another look at this for me please? Also, I am still showing the issue in Chrome where the images are not consistent on the display as soon in this screenshot.

This is what I am seeing from my end:
http://screencast.com/t/CHAZCsdk

[Lely]

Hello There,

That can be achieve using template customization and not CSS only.
Please copy content.php from this folder: \wp-content\themes\x\framework\views\renew to your child theme folder here:\wp-content\themes\x-child\framework\views\renew.

Open the copied file and update the code to this:

<?php

// =============================================================================
// VIEWS/RENEW/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Renew.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-wrap">
 	<?php if( !is_search()): ?>
    <?php x_get_view( 'renew', '_content', 'post-header' ); ?>
	<?php endif; ?>
    <?php if ( has_post_thumbnail() ) : ?>
      <div class="entry-featured">
        <?php x_featured_image(); ?>
      </div>
    <?php endif; ?>
    <?php x_get_view( 'global', '_content' ); ?>
 	<?php if( is_search()): ?>
    <?php x_get_view( 'renew', '_content', 'post-header' ); ?>
	<?php endif; ?>
  </div>
</article>

Then also update this custom CSS:

.search-results article {
    display: inline-block;
    float: left;
    width: 24%;
    padding: 10px;
}

To this:

.search-results article {
    display: inline-block;
    width: 24%;
    padding: 10px;
}

Hope this helps.

[argonstudios]

Lely,

Awesome.

Sorry to have to ask this, but my client now has two more things:

1. is there a way to line the tops of the images up
2. on mobile version, can we have only 1 product show instead of 4 wide being so small

Thank you so much!!!!

[argonstudios]

can we make it look like the sub-category pages? I think this will satisfy the client once and for all.

[Rad]

Hi there,

Please change this

.search-results article {
    display: inline-block;
    width: 24%;
    padding: 10px;
}

to this

.search-results article {
    display: inline-block;
    float: left !important;
    width: 24%;
    padding: 10px;
}
.search-results article:nth-child(4n+1) {
 clear:left;
}
.search-results article:nth-child(4n+0) {
clear:right;
}
@media ( min-width: 767px ) {
.search-results article {
    float: none !important;
    width: 100% !important;
}
}

Hope this helps.

[argonstudios]

UH, no this did not work. This might be for the @media portion, but it completely breaks everything that Lely reported to me just the other day.

Again, I need to try to get this to look as close to the sub-category pages as possible and also:

1. is there a way to line the tops of the images up
2. on mobile version, can we have only 1 product show instead of 4 wide being so small

[argonstudios]

OK,

So by reducing the size of the title on the search results page it has brought the images a little bit more inline with each other. So I have #1 from the above list completed I think.

Now I am seeing a line on the bottom of some images on the search results page. I tried adjusting the padding on the .entry-featured element in css but it appears to only fix some of the images while other still have the line/border on the bottom of the image:
http://screencast.com/t/vMbeQ4OiB0O1

So with the images lined up I just help with this border and the responsiveness of the site.

Thank you.

[Jade]

HI there,

To remove the black border in the images, kindly add this CSS:

a.entry-thumb {
    background-color: transparent !important;
}

Then please add this code:

@media (max-width: 767px) {
    .search-results article {
        width: 50%; 
        float: left;       
    }
}

@media (max-width: 480px) {
    .search-results article {
        width: 100%;
    }
}

Hope this helps.

[Author]

Posts