Reduce width of embedded search bar in mobile view

  • Resolved strootaay

    (@strootaay)


    6 years, 3 months ago

    Hi there – I am using an embedded search bar in my home page using a short code. The following function defines the search bar: add_shortcode(‘examplesearch’, ‘get_search_form’);

    The search bar is centered in the middle of the page when I view it from a desktop or laptop computer but the search bar appears wrapped around when I view it in mobile. Can you please help resize it in mobile view?

    This is what I have used in the page in text mode:

    <div style=”width: 40%; margin-left: auto; margin-right: auto;”>[examplesearch]</div>

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author Tom

    (@edge22)

    Hi there,

    Instead of using inline CSS, try creating a class:

    @media (min-width: 769px) {
    .my-search-form {
        width: 40%;
        margin-left: auto;
        margin-right: auto;
    }
}

    Then you can do this:

    <div class="my-search-form">[examplesearch]</div>

    Let me know if you need more info ??

    Thread Starter strootaay

    (@strootaay)

    Thanks for the suggestion. I tried it but it didn’t help. Still the same issue. The button appears beneath the search bar. I am trying to place the search bar and button side by side. Will it help if we try to reduce the length of the search bar? Can we auto-resize the search bar?

    I am using a smart search widget at the top of the webpage. How can we use that?

    add_action( ‘generate_inside_mobile_header’,’tu_mobile_header_html’ );
    function tu_mobile_header_html() {
    /*add your search widget shortcode here*/

    }

    Theme Author Tom

    (@edge22)

    It looks like you removed the button completely? If you re-add it I should be able to see why it’s not on one line.

    Let me know ??

    Thread Starter strootaay

    (@strootaay)

    I defined a fixed pixel width for the search bar and removed the button. That worked for me both in desktop view and mobile view. Thanks for your support. ??

    Theme Author Tom

    (@edge22)

    Glad you found a solution ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Reduce width of embedded search bar in mobile view’ is closed to new replies.