Centering the button

Excursionist
13 0 1

20190329_234439.jpg20190329_234449.jpgWhat'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.

0 Likes
Shopify Expert
110 20 41

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;}
}

 

 

1 Like

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;

}

1 Like
Excursionist
13 0 1
I really like ur idea. But... where can I change HTML and add new <div style= > ?
0 Likes

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...

 

1 Like
Excursionist
13 0 1
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.
0 Likes

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.

0 Likes
Excursionist
13 0 1
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
0 Likes

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.

 

0 Likes
New Member
1 0 0

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

0 Likes