Centering the button

[ryankim7]

What's up guys, I really need u guys help here. I'm using Brooklyn theme btw. So basically what I'm trying to do is that make the 'explore more button' to center of the div. But when I edit .btn from theme css, the 'mail subscription button' was moved to center too. I just want the 'explore more button, and keep the 'subscription button'. I attached photos of two buttons here.

[Eric_K_]

Ryan-  Try this and let me know how it works out. Add this code to the bottom of your assets/theme.scss.liquid file.

.feature-row__text {
  text-align: center;
  h2, .featured-row__subtext {text-align: left;}
}

[studio-umbrella]

you can target the button's container with the text-align:center; CSS code

Ex.

<div class="container_of_title_and_button">

<a href="" class="btn">button</a>

</div>

so the CSS would be:

.container_of_title_and_button {

text-align:center;

}

[ryankim7]

I really like ur idea. But... where can I change HTML and add new <div style= > ?

[studio-umbrella]

That's a little trickier if you don't know how to read code.

The files are located in Online -> Themes, and then click on "edit code" on your active theme.

But actually Ryan's suggestion looks pretty much the same, only I would switch it around:

.feature-row__text {  text-align: center;
}

I'm just not sure if  h2, .featured-row__subtext {text-align: left;} is important...

[ryankim7]

Bro I know how to edit code. I get it how to add .container_of_title_and_button {
text-align:center;
}
to the theme css. But i don't know where to add
<div class="container_of_title_and_button">
Could u tell me where can I edit HTML not css.

[studio-umbrella]

You don't have to add that div. It was just an example how to target the container of the button.

There should be a wrapping container that contains the button. Just use the class of that container and give it text-align:center;

If you want to send me the link to the page, I can help you out.

[ryankim7]

Oh I see. But if I edit wrapper to center, all other elements will be centered too. Is there any way to change HTML code? Like you said, I really want to add <DIV class="wrapper centered">
.centered { text-align:center; }
My store is www.serenapu.myshopify.com

[studio-umbrella]

I can't find the page that you're trying to fix, but if you say you're a coder, then you should be able to locate the button and just wrap it in a div. Give the div a class and give that a class a rule in CSS.

[JKellyMBA]

After pulling my hair out and trying everything I could find on this forum and Dr. Google, I accidentally fixed it by moving the </div> in the top line of code down to the bottom as the last line of code AFTER the </script>. Like this: </script></div>

Here's the original first and last lines of code:

<div id="product-component-youproductnumergoeshere" style="max-width:300px; margin:0 auto;"></div>
<script type="text/javascript">

</script>

Here's how I moved the </div> to after the last line of </script>:

<div id="product-component-youproductnumergoeshere" style="max-width:300px; margin:0 auto;">
<script type="text/javascript">

</script>
</div>

Here's my site with my centered buttons: https://ebolt.tv

Mind. Blown.

Time. Wasted.

Cheers,

~ Jacqueline