I'm on a Wordpress site, and my Search.php page is too big requiring customers to scroll right and down to find the Search submit button. What css fields do I need to change to make the form smaller or resize to fit the screen so no scrolling is needed. You can see the page on my site at:

https://www.decorativepaintingstore.com/search.php

Thanks.

Hi Sharon

Something odd is going on there. When I mouseover the search form the button moves and causes more scroll - there's a load off css used on the site but do you know where that is coming from?

Andy



Please feel free to review / rate our software

I found the problem in style.css, it's a conflict here - I would remove all that so you get a correct looking search form

.searchform {
display: block;
height: auto;
position: relative;
overflow: hidden;
}

Andy

Please feel free to review / rate our software

At the moment I can't find a style.css file, can you tell me where you found it. I use the ect.css in my root.

Finally I found a style.css in my Tempera WP theme. Not sure what editing that will do to my overall site layout.

It's a css conflict and unless you are using the wordpress search feature, it shouldn't cause any issues.

Andy

Please feel free to review / rate our software

I commented out the section of the style.css sheet, but it still has the scroll bars. Did I not comment out enough or not doing this correctly?

/* Search buttons -CONFLICT WITH ECT SEARCH
.searchform {
display: block;
height: auto;
position: relative;
overflow: hidden;
}

.contentsearch {
display: block;
float: none;
overflow: hidden;
margin-bottom: 20px;
padding: 10px 0;
}

.no-results .contentsearch {
padding: 0;
}


.searchform input[type="search"] {/* This keeps the search inputs in line This is the Sidebar Search*/
display: block;
float: left;
padding: 0 30px 0 10px;
height: 50px;
width: 100%;
border-radius: 4px;
}
.contentsearch .searchform input[type="search"]

{
width: 100%;
margin-left: 0;
}


.searchsubmit {
display: block;
position: absolute;
right: 0;
font-family: "elusive";
font-size: 17px;
border: none;
height: 50px;
vertical-align: middle;
background: none;
box-shadow: none;
opacity: .5;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
END ECT SEARCH FORM CONFLICT------------------------*/

That looks better to me. Can you force a refresh Ctrl+refresh and check?

Andy

Please feel free to review / rate our software

Now on Chrome the Search submit button is far right beyond my right sidebar. No change on Safari that I can see.

Took the additional out and now the submit button is far right beyond the right sidebar on both Chrome and Safari.

In line 1941 I still see the class for .searchsubmit - sorry the forum mangled my reply above but it's that class that you need to comment out.

Andy

Please feel free to review / rate our software

Thanks! I thought I had commented out that whole piece, but there was another commented out note within my /* */ which seemed to negate my second part. I've fixed that and it looks good now.

Thank you so much for your help and patience! You're the best!