Template css overriding 3rd party Search input fields

How can I set the padding to none?

Hi.

You can not set it to none since any changes in the template code will be lost after the template update.

Explore the Business Directory Search Bar through your browser Dev Tools to determine the values of padding and parent selector that are from Business Directory Search Bar css. Insert code snippet that you provided into custom.css file adding a parent selector to it and the values from CSS of Business Directory Search Bar .

For example

.PARENT_SELECTOR :is(input[type="text"]:not(.form-control),
input[type="email"]:not(.form-control),
input[type="url"]:not(.form-control),
input[type="date"]:not(.form-control),
input[type="password"]:not(.form-control),
input[type="search"]:not(.form-control),
input[type="tel"]:not(.form-control),
input[type="number"]:not(.form-control),
select:not(.form-select):not(.form-control)) {
    padding: /*values from CSS of Business Directory Search Bar */ !important;
}

"They should remove the !important tag as this will enforce the padding on all elements on the website."

Hi. This is true.

You can delete this from template.css. But the update of the template will return it back. Perhaps the JoomShaper team had a good reason to use !important. Although I never found this reason for several years. I think the team should look at this and fix it in the next update.

Therefore, while this is not fixed, the best way out is to use "my" method.

Provide a public link to the page containing the problem and I can help you with "my" method. I am not an employee of support, so I can only see a public link. Access to admin is not required.

Hi.

This should help.

#searchform .form-field select,
#searchform .form-field input[type="text"] {
    width: 200px !important;
}
.jbd-container .has-jicon-left > input[type="text"]:not(.form-control) {
    padding-left: 36px !important;
}

However, for the sake of justice, it is worth noting that the default code from JBusiness team is very far from ideal. If they wrote their code differently, with concern about eliminating all possible conflicts (which is not difficult), then this problem would not have arisen at all.

Pavel,

How can this code be adjusted for smaller devices? The @media only rule is the way but I'm unsure how to integrated the code you supplied.

Thank you

Hi. Here is

/*Breakpoints*/
/* Desktop First */
@media (max-width: 1399.98px) {
    /* your code goes here */
}
@media (max-width: 1199.98px) {
    /* your code goes here */
}
@media (max-width: 991.98px) {
    /* your code goes here */
}
@media (max-width: 767.98px) {
    /* your code goes here */
}
@media (max-width: 575.98px) {
    /* your code goes here */
}

/* Mobile First */
@media (min-width: 576px) {
    /* your code goes here */
}
@media (min-width: 768px) {
    /* your code goes here */
}
@media (min-width: 992px) {
    /* your code goes here */
}
@media (min-width: 1200px) {
    /* your code goes here */
}
@media (min-width: 1400px) {
    /* your code goes here */
}

Always keep it at the very bottom of your CSS file, in such order.

Most appreciated Pavel. Thank you.