#134015 Search Field changes layout

Landing Forums JupiterX WordPress Theme Search Field changes layout

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • Sonja Bloch

    Hi,

    please can you check, after changing the page on the website the design of the search field is changing. Many thanks.

    https://drive.google.com/file/d/1H2kNvsSQ2ofyYAQUoyr6lRAbKY9LctFj/view?usp=sharing

    Amir Rather Support Team

    Hello There

    The Woocommerce Styling seems to be overriding the Search Input styles, try the below CSS in Customize > Additional CSS:

    .raven-search-form .raven-search-form-input {
        border: none !important;
        background-color: transparent
    }

    Regards

    Sonja Bloch

    Thanks but your reply doesn’t help. The field looks correct on some pages but when the user visits other pages the the design changes without any reason! Please check my video, so you can see it. The CSS is correct on homepage https://eskimoshop.sonjablo.myhostpoint.ch/, but when you go to e.g. this page https://eskimoshop.sonjablo.myhostpoint.ch/produkt-kategorie/babytextilien-kindertextilien/ it changes the style with no reason. Many thanks.

    Alexander Hutsol Support Team

    Hello,

    Would you mind to provide us with wp-admin login details to your site in the private reply https://prnt.sc/qr3w3e to check the issue?

    Thank you.

    Regards.

    Private
    Sonja Bloch
    This reply has been marked as private.
    Amir Rather Support Team

    I added the below CSS please check now:

    .woocommerce form input:not(.jet-range__slider__input) {
        background: unset !important;
        border: none !important;
    }
    .woocommerce-checkout .woocommerce form input:not(.jet-range__slider__input) {
        background: #f2f2f2 !important;
    }

    Regards

    Sonja Bloch

    Hi,

    your CSS affects many fields in footer and Woocommerce which are now without e.g. border. I added “.searchfield” in Customizer to your styling to just change the search field but it doesn’t work. Please can you check? Please don’t change any other element than the search field! Many thanks.

    Alexander Hutsol Support Team

    Hello,

    I changed the previous CSS to the following one to fix the issue:

    .jupiterx-header .raven-search-form .raven-search-form-input {
    border: none !important;
    background-color: transparent !important;
    }
    
    .jupiterx-header .raven-search-form .raven-search-form-input:focus {
    box-shadow: none !important;
    }

    Please clear the cache and check the search field now now.

     

    Regards.

Viewing 8 posts - 1 through 8 (of 8 total)
You must be logged in to reply to this topic.
Login