[Support request] Center and Bigger Search box

Home Forums Support [Support request] Center and Bigger Search box

Home Forums Support Center and Bigger Search box

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1613412
    Juan

    Hi, my site is lamejorfreidora.com I’m trying to center the Search Box on a Section but I don’t get any result. Also I need resize the Search Box and make it responsive for mobile device.

    Anyone How to do it?

    #1613645
    Ying
    Staff
    Customer Support

    Hi Juan,

    You can center the search box by setting the Grid Horizontal Alignment to Center.
    https://www.screencast.com/t/kx9N9NUmu4X

    Are you trying to make the search box bigger on desktop and smaller on mobile?

    Let me know ๐Ÿ™‚

    #1613647
    Juan

    Yes, bigger on desktop and smaller on mobile.

    #1613655
    Juan

    Ying, I just set the Horizontal Alignment of the grid on Center but it doesn’t work. I’m ussing a shortcode for the Search Box, I don’t know if that is a problem?

    I’m using a Grid with three columns and just put the shortcode on the middle one.

    https://prnt.sc/wkjql1

    #1613717
    Ying
    Staff
    Customer Support

    Hi Juan,

    Can you deactivate your cache plugin and clear browser/server cache first?

    And also you won’t need to use 3 columns grid structure, 1 column is good enough. You could delete the other 2 columns if you are not going to add content in them.

    After you center the search box, try this CSS:

    @media (min-width: 769px) {
        .search-form .search-field {
            padding-right: 350px;
        }
    }
    @media (max-width: 768px) {
         .search-form .search-field {
            width: 60%;
        }
    }

    Let me know ๐Ÿ™‚

    #1614068
    Juan

    Ying, for mobile view works fine! thanks a lot.

    Still doesn’t show on center, i don’t know why

    You can see the result on La Mejor Freidora

    #1614209
    David
    Staff
    Customer Support

    Hi there,

    remove the CSS that Ying provided and try this instead:

    .search-form {
        display: flex;
        max-width: 500px; /* Set max width of form */
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px; /* add space below search */
    }
    
    .search-form label {
        flex: 1;
    }
    
    .search-field {
        width: 100%;
    }

    I have commented the width property above, adjust this to suit, also included some bottom margin to put some space between the search filed and the content below.

    #1615400
    Juan

    It works fine David. Thanks a lot.

    Ying, thanks as well for your time and help.

    #1615444
    David
    Staff
    Customer Support

    Glad we could be of help.

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