Нечитаемый макет результатов Google Custom Search в wordpress

Question

Результат пользовательского поиска Google неверно отформатирован на странице пользовательского поиска Wordpress, которую я создал. Для каждого найденного сообщения текстовый фрагмент сообщения накладывает миниатюрное изображение, делая результаты нечитабельными. Я мог бы отключить эскизы с помощью настроек GCSE, но я бы предпочел найти способ их сохранить.

Вот скриншот: https://soccermoviemom.com/wp-content/uploads/2016/09/GCSE-layout-problem.png

страница живой GCSE находится на https://soccermoviemom.com/search

Я использую GCSE всю ширину макета, но другие не работают для меня вообще. Я пробовал устанавливать различные параметры в инструкции «div» на странице поиска, но это не помогает.

Благодарим за помощь, которую вы можете предоставить!

-mj подветренной

Answer 1

Все CSS для вашего <div> элемента на самом деле хорошо.

Это элемент <td class="gsc-table-cell-thumbnail gsc-thumbnail">, который автоматически складывается на длину второго <td>, который имеет width:100%.

В CSS файл default+en.css, обратите внимание на:

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

Вы можете решить эту проблему путем добавления нового CSS свойству width: 72px; к .gsc-table-cell-thumbnail, .gs-promotion-image-cell.

Или просто переопределите объявление CSS, если у вас нет доступа к файлу.

Answer 2

FYI, консультант WP от wpriders исправил мою проблему CGSE, создав для меня плагин с несколько иным кодом CSS.

Я не просил их попробовать код Йоахима, но я очень оценил его усилие, чтобы помочь.