[Resolved] CSS issue?

Home Forums Support [Resolved] CSS issue?

Home Forums Support CSS issue?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2069804
    Rui

    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.

    #2069869
    David
    Staff
    Customer Support

    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;
    }
    #2069883
    Rui

    Thank you so much for the guidance, David.
    The code solved the problem!

    #2069886
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.