Search widget under Flexbox

[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

[David]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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;
}

[David]

Remove that CSS and add this:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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>

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

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

[David]

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%;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

Thank you again, David! That works. 🙂

Paul

[David]

Glad to hear that!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts