unreadable layout of Google Custom Search results in wordpress

Question

The Google Custom Search result is incorrectly formatted in the wordpress custom search page I created. For each post found, the post's text snippet overlays the thumbnail image, making the results unreadable. I could turn off the thumbnails via the GCSE settings, but I'd prefer to find a way to keep them.

Here's a screenshot: https://soccermoviemom.com/wp-content/uploads/2016/09/GCSE-layout-problem.png

A live GCSE page is at https://soccermoviemom.com/search

I am using the GCSE full-width layout, but the others don't work for me at all. I've tried setting different options on the "div" statement within the search page, but this doesn't help.

Thank you for any help you can provide!

-mj lee

Answer 1

All CSS for your <div> element is actually okay.

It's the <td class="gsc-table-cell-thumbnail gsc-thumbnail"> element that's automatically folding to the length of the second <td> , which has a width:100% .

In CSS file default+en.css , look at:

.gsc-table-cell-snippet-close, .gs-promotion-text-cell {
    vertical-align: top;
    width: 100%;
}

You can solve this by adding a new CSS property width: 72px; to .gsc-table-cell-thumbnail, .gs-promotion-image-cell .

Or simply override the CSS declaration in case you don't have access to the file.

Answer 2

FYI, a WP consultant from wpriders fixed my CGSE problem, creating a plugin for me with somewhat different CSS code.

I did not ask them to try Joachim's code, but I very much appreciated his effort to help.