Center and Bigger Search box

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 :)

Yes, bigger on desktop and smaller on mobile.

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

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 :)

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

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.

It works fine David. Thanks a lot.

Ying, thanks as well for your time and help.

Glad we could be of help.