- This topic has 9 replies, 2 voices, and was last updated 3 years, 6 months ago by David.
-
AuthorPosts
-
October 8, 2020 at 1:06 am #1477953Paul
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 #1478027DavidStaffCustomer SupportHi there,
can you provide a link to the site with Flexbox enabled so i can see the issue?
October 8, 2020 at 2:57 am #1478099PaulHi 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 #1478196DavidStaffCustomer SupportRemove that CSS and add this:
.widget .search-form form { flex: 1; display: flex; }
October 8, 2020 at 5:09 am #1478288PaulThank 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 #1478422DavidStaffCustomer SupportAny chance you can switch back to Flex with the ad code in place so i can see what the issue is?
October 8, 2020 at 6:50 am #1478430PaulI have just done so. Thank you. That is very kind.
October 8, 2020 at 7:28 am #1478511DavidStaffCustomer 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%; }
October 8, 2020 at 7:55 am #1478689PaulThank you again, David! That works. 🙂
Paul
October 8, 2020 at 8:49 am #1478776DavidStaffCustomer SupportGlad to hear that!
-
AuthorPosts
- You must be logged in to reply to this topic.