NEED HELP ALIGNING A BUTTON TO CENTER! :) <3

Solved
Highlighted
New Member
6 0 0

Hello!

My name is Fabian and I run anyfn.com.

I want to have a "Search" bar on my collection pages.

 

I added this code to "collection-filters.liquid", and a search bar popped up.

<form method="get" action="/search">
    <input type="text" name="q" />
    <input  type="submit" value="Search" />
</form>

 

The problem: The bar pops up to the far left. How do I center it?

 

Thanks a bunch!

0 Likes
Highlighted
Astronaut
1082 178 213

Hey,

In which page is this at? The only search bar that I see - the one on the header - is already center aligned when clicked.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
6 0 0

Hi,

Thanks for your response.

 

I don't have the button added on the live version of the website.

 

But, when I do add the search button, it looks like this:

 

Capture.PNG

 

How do I align the button to the center?

0 Likes
Highlighted
Astronaut
1082 178 213

Can you send the URL to this offline theme please? 

preview2.pngpreview1.png

Just click on "preview" and then paste in that URL. 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
6 0 0
Highlighted

Hi, the most simplest way would be to add some inline styling to the form. Try adding style="text-align:center;" to the form tag. See below.

<form method="get" action="/search" style="text-align:center;">
    <input type="text" name="q">
    <input type="submit" value="Search">
</form>
In need of a Shopify developer for a bespoke app or theme, or maybe just someone that can help you out. Give us a shout, we are always happy to help. Wehateonions
0 Likes
Highlighted
Astronaut
1082 178 213

This is an accepted solution.

1. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
2. paste this code right above the </body> tag:


<style>
[id*='filters'] form{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 60px;
}

@media (max-width: 767px){
    [id*='filters'] form{
    
    margin-bottom: 40px;
}
}
</style>


I added some bottom spacing as well. Let me know whether it works for you

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
6 0 0

Woah, thanks a lot! 

Any idea on how I can also just add some space between the collection list and button?

 

Thanks again! Capture.PNG

0 Likes
Highlighted
Astronaut
1082 178 213

Sure, try this:

<style>
[id*='filters'] form{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 60px !important;
}

@media (max-width: 767px){
    [id*='filters'] form{
    
    margin-bottom: 40px !important;
}
}
</style>

 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes