I just moved an old site from a Dreamweaver template into WordPress. For the most part things are working great. Here are two issues that I need help with:

Site: https://www.alkydigger.net/

On the Search page - https://www.alkydigger.net/search.php - it looks fine, but if you type into the Search box, you will see the text (which I believe should be showing in a drop down) all behind the other text. It's a little hard to describe, you have to try it to see it.

The other issue is that on large screens (1550 px wide and above) on the Product Detail page, the Product Title will start way over to the right and then wrap around. Smaller screens it works fine. Again, you have to try it to see it. Here is an example page: https://www.alkydigger.net/proddetail.php?prod=TBS2027 -- the "8-71" at the beginning of the Title is way over to the right and the rest of the title is wrapped onto the line below it.

Thanks!

Hi Kelly, try adding the following to the ectcart.css file around line 1643 better yet I would move all the search classes to style3.css before the breakpoints begin, as ectcart is included in the updater and any changes you make will be overwritten when updating.

#selectstext.autosearch {
background: #fff;
padding: 4px;
}

in style3.css
change
div.detailimage {
width: 475x;
padding: 10px;
float: left;
}
to

div.detailimage {
width: 475px;
padding: 10px;
float: left;
}


you may want to look at setting the detail name as a h1 tag for seo purposes in the includes.

$GLOBALS['detailnameh1']=TRUE;





Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

I made the changes you suggested, but it did not fix either issue.

The issue with the Product Title only shows up when you enlarge the screen - and it still is doing the same thing as before.

The search issue looks a little different now, but it's still not right.

Hi Kelly, the change for the search is working I see it in Firefox browser, if using Chrome try a hard refresh - ctrl + Shift +del However you have changed the image width to 260px, now the name can be adjusted to the following:

div.detailname {
font-size: 22px;
line-height: 24px;
width: 90%;
margin-top: 15px;
margin-bottom: 15px;
padding-bottom: 5px;
border-bottom: 1px solid #ccc;
}


Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

That fixed the title issue - thank you!!

The issue with the search is still not working correctly. When anything is typed into the search box, it simply shows a white background and covers up the other text on the page - it should create a drop down box with an arrow and a scroll bar, not just a white background - am I right about that? Here is a screenshot using Chrome (I normally use Firefox): https://www.alkydigger.net/screenshotSEARCH.PNG

Hi the search results will display in a drop down without a scroll, you can style the drop down in style3 around line 640.

example

#selectstext.autosearch {
background: #151414; >>>> dark background
padding: 4px;
color: #fff; >>>> white font
border: 1px solid #ff0000; >>>> red border
}

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

That does look better - but it doesn't work well on smaller devices. It's hard to read - needs more space between entries - and it overlaps any images below it.

Any suggestions?

Hi Kelly, you would need to add the class to the breakpoints for smaller devices and make adjustments.

Example adding line-height: 2.0 to line 641 - looks like you copied my example with the notations

change this

#selectstext.autosearch {
background: #000000;
padding: 10px;
color: #fff;
>>>> white font border: 1px solid #ff0000; >>>>>>
border-radius: 5px;
cursor: pointer;

}

to the following


#selectstext.autosearch {
background: #000000;
padding: 10px;
color: #fff;
border: 1px solid #ff0000;
border-radius: 5px;
cursor: pointer;
line-height: 2.0;
}

Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates