Increase Width of Search Box

Author	« Topic »
1234 Ecommerce Template Expert USA 996 Posts	Posted - 09/18/2022 : 12:19:13 Is there a way to increase the width of the search box on the top of my pages? I've tried removing the column between the Logo and the search box, but that sort of discombobulated things so I immediately put it back. I also tried editing the properties of the search box and entered a width of 500 which is the max that it would accept, but that didn't seem to change things. I would like to widen the search box so that it will take up the empty space to the right of the logo. Also if possible, can I increase the height of the search box just a smidge? I purchase my template so long ago that I'm afraid I can no longer remember the name of it, but feel free to have a look at www.usafleetsupply.com
Marshall Ecommerce Template Guru USA 1953 Posts	Posted - 09/18/2022 : 13:35:39 This is the CSS for the search box in the /css/style.css .topsearchWrap {} .top_search { position:relative; padding-right:60px; box-sizing:border-box;} .top_search Input { margin:0px; padding:5px; border:1px solid #cccccc; height:35px; box-sizing:border-box; font-size:12px; color:#999999; font-style:italic; width:100%;} .top_search Input[type=submit] { position:absolute; right:0px; top:0px; margin:0px; padding:5px; border:1px solid #cccccc; border-left:0px; height:35px; width:60px; cursor:pointer;} As you can see it is set to 100% wide. I think what is limiting you is the "size" setting for the box itself. If you look at your main.dwt, find <div class="col-5 topsearchWrap"> <div class="top_search"> <form method="post" action="search.asp" id="search_mini_form"> <input type="hidden" name="posted" value="1"> <input type="text" class="search_look" value="" name="stext" id="search" autocomplete="off" placeholder="What are you looking for?" size="500"> <input type="submit" value="Search"> </form> </div> </div> I would suggest either changing the 500 I highlighted in red or simply remove it. Marshall CENLYT Productions - ms designs Affordable Web Design Custom Ecommerce Designs Responsive Websites Cenlyt.com
1234 Ecommerce Template Expert USA 996 Posts	Posted - 09/18/2022 : 14:02:38 Marshall, Thanks for the reply. I had actually added the "size=500" in an attempt to widen the box, but it didn't make a difference. The box seems to be limited by the column (I think). When I remove the column between the logo and the search box <div class="col-7">, and have the search box set at "size=500", that looks to widen the box in my editor, but it makes the rest of the page quite cattywampus. I'm not sure what else to try....
midvalleydrifter001 Ecommerce Template Expert USA 962 Posts	Posted - 09/18/2022 : 15:56:55 Try this... In your style.css sheet change the following to .col-5 {width: 50%} Line 35 .col-7 {width: 50%} Line 37 Patrick
1234 Ecommerce Template Expert USA 996 Posts	Posted - 09/18/2022 : 16:28:57 Patrick, Thank you for that! I ended up changing them to: .col-5 {width: 90%} Line 35 .col-7 {width: 10%} Line 37 That is what I was looking for. I am now wondering if I might be able to tweak it even more and have the search box more in the center vertically.?
	« Topic »