[Support request] Search widget under Flexbox

Home Forums Support [Support request] Search widget under Flexbox

Home Forums Support Search widget under Flexbox

  • This topic has 9 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1477953
    Paul

    I have just updated to GeneratePress 3, and I love it. I’ve happily renewed my licence at the same time.

    I think my site will switch fairly happily to use Flexbox rather than floats. The only issue seems to be that the Search widget no longer extends to the full width of the container (see comparison image). Also, it would be better to have the Go button on the same row as the search input form.

    Do I need to edit the search widget css to fix these issue, or is there a simpler solution?

    https://photos.app.goo.gl/VVFHaFkqN5G1pbzc6

    Many thanks.

    Paul

    #1478027
    David
    Staff
    Customer Support

    Hi there,

    can you provide a link to the site with Flexbox enabled so i can see the issue?

    #1478099
    Paul

    Hi David,

    Yes, it is here, and I’ve enabled Flexbox. https://www.skymania.com/wp/

    I remembered that I had added the following custom css a while back, as follows, but if I remove that, it still displays the “Go” as a second line, only smaller!

    /* change style of search widget */

    .widget .search-form input {
    width: 100%;
    border: 1.5px solid #2988bc;
    padding: 10px 10px;
    padding-right: 100px;
    font-size: 16px;
    }

    #1478196
    David
    Staff
    Customer Support

    Remove that CSS and add this:

    .widget .search-form form {
        flex: 1;
        display: flex;
    }
    #1478288
    Paul

    Thank you very much, David, that did the trick!

    I’ve switched back to Floats for the moment because, for some reason, the Google ad fails to appear in the header under Flex in desktop mode. They’re inserted as this hook, using Elements. (I’ve hidden my Google details).

    <div class="hide-on-mobile hide-on-tablet">
    	<amp-ad width="100vw" height="320"
         type="adsense"
         data-ad-client="ca-pub-xxx"
         data-ad-slot="xxx"
         data-auto-format="rspv"
         data-full-width="">
    		  <div></div>
    	</amp-ad></div>
    <div class="hide-on-desktop hide-on-mobile">
    	<div class="aligncenter">
    	<amp-ad
         layout="fixed"
         width="728"
         height="90"
         type="adsense"
         data-ad-client="ca-pub-xxx"
         data-ad-slot="xxx">
    </amp-ad></div>
    </div>
    <div class="hide-on-desktop hide-on-tablet">
    	<div class="alignleft">
    	<amp-ad
         layout="fixed"
         width="320"
         height="50"
         type="adsense"
         data-ad-client="ca-pub-xxx"
         data-ad-slot="xxx">
    </amp-ad></div>
    </div>
    #1478422
    David
    Staff
    Customer Support

    Any chance you can switch back to Flex with the ad code in place so i can see what the issue is?

    #1478430
    Paul

    I have just done so. Thank you. That is very kind.

    #1478511
    David
    Staff
    Customer Support

    Each of your DIV Containers have a few classes eg.

    <div class="hide-on-mobile hide-on-tablet">

    include this class header-advert in each of them eg.

    <div class="hide-on-mobile hide-on-tablet header-advert">

    Then add this CSS:

    .header-advert {
        width: 100%;
    }
    #1478689
    Paul

    Thank you again, David! That works. 🙂

    Paul

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