- This topic has 9 replies, 2 voices, and was last updated 4 months, 2 weeks ago by
David.
-
AuthorPosts
-
October 8, 2020 at 1:06 am #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
October 8, 2020 at 1:57 am #1478027David
StaffCustomer SupportHi 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/October 8, 2020 at 2:57 am #1478099Paul
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;
}October 8, 2020 at 4:15 am #1478196David
StaffCustomer SupportRemove 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/October 8, 2020 at 5:09 am #1478288Paul
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>
October 8, 2020 at 6:47 am #1478422David
StaffCustomer SupportAny 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/October 8, 2020 at 6:50 am #1478430Paul
I have just done so. Thank you. That is very kind.
October 8, 2020 at 7:28 am #1478511David
StaffCustomer SupportEach 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/October 8, 2020 at 7:55 am #1478689Paul
Thank you again, David! That works. 🙂
Paul
October 8, 2020 at 8:49 am #1478776David
StaffCustomer SupportGlad to hear that!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.