Archived topic
CSS issue?
3 replies · Started by Rui on January 5, 2022
I need some assistance with respect to something that has been intriguing me for days. If I put a code like the following in an HTML document:
<script async src="https://cse.google.com/cse.js?cx=partner-pub-1111111111111111:ffffff"></script>
<div class="gcse-searchbox-only" data-resultsUrl="https://www.mysite.com/search_gcse"></div>I have this Google Search Box which is responsive. Occupies the maximum page width on monitors AND mobile devices in the same way.
But inside my WP site with GeneratePress something happens that I can't solve. The search button always drops below the search field on mobile devices.
I tried to solve it with some CSS but I couldn't. I could be wrong, but it looks like there is some stylesheet in GeneratePress itself that causes the search button drop to the other line when in small screens.
I will provide the temporary link of the two examples (in private).
If we reduce the size screen, the blue search button will only drops to other line in GP site. I would like it stays on the same line, on the right side of the search field, which just shrinks in size.
Thank you.
Hi there,
nothing coming from the theme, there is a style sheet attached to the form from google, and the forms HTML is using Tables so it is getting styles from theme and TablePress plugin but primarily the styles are from googles style sheet.
Try adding this to keep the button inline:
.gsc-search-box table tr {
display: flex;
}
.gsc-search-box .gsc-search-button {
width: auto;
}
.gsc-input {
flex-grow: 1;
}Thank you so much for the guidance, David.
The code solved the problem!
Glad to hear that!
