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

Question

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

Answer 1

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'

Answer 2

you can modify the class used in the code by using this piece of code, will make the custom search responsive.

@media (max-width: 740px) { /* max-width can change according to your usage*/
  .anyclass {
    /* css properties here;*/
   }
}

@media (min-width: 739px) {
  .anyclass {
    /* css properties here; */
   }
}

This way the search will look responsive and you will achieve what you wanted.

Answer 3

I was able to get the iframe to work responsively on my site by styling the iframe directly:

#google-cse-results iframe {
    height:1860px; width:100%;
}