- Posts
Hi,
The search button text wraps into a second line. It only does that by pages I created, but not by pages like the cart, my account, shop… created by woocommerce. Why does that wrap into second line on pages I created. Where can I change/fix that so it does not wrap into a second line?
Any help would be appreciated.
Thank you.
KlausHi Klaus-
Thanks for reaching out! We’ll be happy to help you get that search button fixed.
Generally speaking, this is happening due to a style in the Astra theme that you’re using, but you can use a little bit of Custom CSS to fix it. Navigate to Customize > Additional CSS and add this line:
form.woocommerce-product-search button { width: 200px; }Awesome, that is exactly what this needed. Thank you so much for your help!
KlausSo now after I fixed that with your above suggestion, I am wondering why that width 200 only applies to pages I created but not to the pages that were generated automatically as stated above like the cart, my account, shop… I take it there is a separate place that will effect those pages. Any idea where that might be? I sure would like that search button to be the same size on all pages.
Thank you.
KlausHi Klaus!
I took a look at the differences in the style rules for that button between the WooCommerce generated pages and the ones you created on your own, and I might have a solution for you.
The WooCommerce stylesheet contains that following rule for the search button which only appears to load on pages generated by the plugin:
.woocommerce .widget_product_search button, .woocommerce-page .widget_product_search button { flex: 0 0 auto; padding: 10px 20px; }If you want the button to look the same on all pages then you could try swapping out the width adjustment in your custom code with the flex and padding settings from the WooCommerce stylesheet. The new code will look like this:
form.woocommerce-product-search button { flex: 0 0 auto; padding: 10px 20px; }Please let us know how the new code works out!
Once again THANK YOU. I wish I would know more about CSS. It is just rare that I run into needing it. So now with the new code: form.woocommerce-product-search button { width: 200px; } all pages have the perfect size search button, even on mobile.
Again… thank you!
Klaus
- The topic ‘[Resolved] Search button text wraps into second line using Astra Theme’ is closed to new replies.
