How to force Google's custom search to be responsive?


Tags: css,search-engine,google-search,google-custom-search

Problem :

We're using Google's custom search engine on one of our websites and one of the elements inside the iframe is .gs-webResult {width:42em;}

This is basically a container div over each result row. I can't change the CSS directly from my website since it's in an iframe.

This is the only similar question I was able to find: https://drupal.org/node/1420294

The answer was:

"You have to configure that in the Google AdSense site, in your search ad. One of the last settings is the width of the search results frame..

Changing the contents of that frame is not possible."

That last line where "changing the contents of that frame is not possible" seems quite unlikely to me.

So my question is, how would I change it to be .gs-webResult {width:100%;} OR is there an option that allows me to make the search engine responsive?

Thanks



Solution :

The work around is to set up the custom search in Adsense and then open the custom search control panel at https://www.google.com/cse/all.

Choose the search engine you want to edit and then in the left hand menu click 'Look and feel' where there are various options including responsive. Choose what you want and then 'Save and get code'


    CSS Howto..

    Javascript/CSS slideshow: Using transparencies highlights flaws I don't know how to fix

    How to deal with different stylesheets (WYSIWYG Editor and Webpage one) in the same page?

    how to set css to a specific attribute of an input tag

    How to make two separate, independent columns (using html and css)

    How to change MenuItem focus/hover color

    Weird behavior when I'm alternating between showing and hiding Flot graphs

    How to set the container height automatically maintaining the ratio

    How do I make
  • with block elements sit beside each other?
  • Refactor link to show/hide a table row

    How to highlight a whole table cell with padding when hovering?

    css how to make text align bottom?

    How to reference a .css file on a razor view?

    how to deselect a css style using javascript?

    how to cope with text to element alignment issues

    How do I set the width and height of a textarea using CSS?

    How to write this css in shorter way? see example

    how to apply css rule to the previous and the next element in HTML?

    How to override the default css class using c#

    How to set jquery ui icon as background image per css?

    How to stretch an element out vertically so that it is always at least as tall as its sibling?

    How to style a table from horizontal layout to vertical layout with CSS

    CSS: How to make single div of multiple divs within a div show on the bottom

    How to add 10 pixels to a dynamic top position in CSS using SASS

    How can I adjust the margins of quote symbols added with CSS

    How do you measure the height of a HTML element scaled with CSS3 transform?

    How to insert the number into the bottom right of each page by TWIG and CSS

    How to partly color the border with css [closed]

    How to make this slider control to work in both directions?

    CSS: How to make the border of a

    tag to be 100 percent on the div tag?

    How can I add flashing effect to an option tag?