Google CSE - cannot get to size correctly

[Brian_M_Fromknecht]

Trying to get Google CSE to fit inside a div within my top navigation and I can’t seem to get it to look as intended - I’d like it to look like this:

http://werackyourworld.webflow.io/test-page-1
But it looks like this: http://werackyourworld.webflow.io/

Read only: https://preview.webflow.com/preview/werackyourworld?preview=646d71e490397efbb06c7b09465b4b49

---

Here is my public share link: LINK
(how to access public share link)

[samliew (samliew.com)]

It has something to do with this

table.gsc-search-box tbody tr td *

[Brian_M_Fromknecht]

I took out all the mobile elements that were set to display:none until their respective breakpoints - and it work! Now I need to figure out how to add back in those mobile elements without messing it up again. I think wrapping it in a media query would work but im not sure how to do that. Any idea?

[Brian_M_Fromknecht]

Where did you find that piece of code anyway?

[samliew (samliew.com)]

Here is the official documentation

Using media queries

[samliew (samliew.com)]

https://cse.google.com/cse/style/look/mobile/minimalist.css

.gsc-search-box {
   height: 200px!important;
}

and

table.gsc-search-box tbody tr td * {
   height: 70%!important;
   font-size: 40px!important;
}