problem in mobile view – search bar appears big in mobile view

  • hello,
    the search bar in homepage (website header in all pages) appears big in mobile view. I don’t want it.
    Actually I use YITH AJAX SEARCH FORM plugin for that search bar. but I made some changes to display it in long size for desktop view. I use the following code to make it long in additional css

    section#dgwt_wcas_ajax_search-2 {
    width: 600px;
    padding-right: 100px;
    border-right-width: 100px;
    margin-right: 200px;
    margin-bottom: 0px;
    padding-bottom: 10px;
    padding-top: 20px;
    border-top-width: 100px;
    margin-top: 30px;
    }

    because of this, it looks long in desktop. but I don’t want it to look long in mobile view.
    I’m using estore free theme. my website https://www.tekparts.in/
    HOW DO I CHANGE IT, PLEASE HELP ME TO SOLVE THIS.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • lisa

    (@contentiskey)

    Might take a bit of trial and error:
    -try some media queries in your theme CSS for narrow and wide devices so the CSS is different for various screen sizes
    -try adjustable instead of fixed width

    First make it width:200px or whatever you want for mobile and then add this at the end of your css file :

    @media screen 
and (min-width : 1201px) {
section#dgwt_wcas_ajax_search-2 {
width: 600px;
}
}
    Thread Starter hritika

    (@hritika)

    THANK YOU FOR YOUR REPLY AND SUPPORT
    where do I change the width?

    added the code that you are given

    @media screen
    and (min-width : 1201px) {
    section#dgwt_wcas_ajax_search-2 {
    width: 600px;
    }
    }

    and change the min-width to 120px but no change appears.
    What do i do?

    • This reply was modified 5 years, 6 months ago by hritika.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘problem in mobile view – search bar appears big in mobile view’ is closed to new replies.