I need help with liquid coding

Solved
Tourist
10 1 1

I need help regarding coding in liquid. 

I created a Call-to-Action button for my store but it's not centering on the page (attached picture) and I don't know why not. 

Can anyone help please?

 

-Ethan

 

Here is the code I have for the CTA button: 

 

<hr>
<div id="section-cta">
<div class="container">
<h3> {{ section.settings.text-box }} </h3>
<a href="{{ section.settings.link }}" class="ctabutton">{{ section.settings.linktext }}</a>
</div>
</div>
<hr>

{% schema %}

{
"name": "Call-to-Action Button",
"settings": [
{
"id": "text-box",
"type": "text",
"label": "Heading",
"default": "Title"
},
{
"id": "link",
"type": "url",
"label": "Button link"
},
{
"id": "linktext",
"type": "text",
"label": "Button text",
"default": "Click here"
}
]
,
"presets": [
{
"name": "Call to Action",
"category": "Call To Action"
}
]
}

{% endschema %}

 

{% stylesheet %}

.ctabutton {
display: inline-block;
padding: 0.7em 1.7em;
font-size: 1.5em;
cursor: pointer;
text-decoration: none;
color: #ffffff;
background-color: #30011e;
border: none;
border-radius: 0.62em;
box-shadow: 0 0.25em #999999;
}

.ctabutton:hover {
background-color: #6e4d61;
}

.ctabutton:active {
background-color: #461b4b;
box-shadow: 0 0.125em #666666;
transform: translateY(0.1em);
}

{% endstylesheet %}

 

{% javascript %}
{% endjavascript %}

0 Likes
Shopify Partner
95 9 10

@GiftsABliss Could you provide the link to your website, then I will be able to help

Shopify help
denisaksutik@gmail.com
0 Likes
Shopify Partner
8 0 0

Hi @GiftsABliss 

 

Adding this to a parent element will center the button:

#section-cta { text-align: center }

// or

#section-cta .container { text-align: center }

 

0 Likes
Tourist
10 1 1

Denis_A

https://www.giftsabliss.com/

The button is centered on the Homepage but not anywhere else (I think because I added it to the Homepage using the Shopify Editor while I used code for everything else)

 

mtclmn

Can you show me where exactly I would put that piece of code please? 

0 Likes
Shopify Partner
8 0 0

You can put it in one of your theme's stylesheets (the .scss files). Somewhere near the bottom should work.

Or easier might be to put it in the code you pasted above, between the two {%stylesheet%} tags.

 

{% stylesheet %}

.ctabutton {
   ...
}

#section-cta { text-align: center; }

{% endstylesheet %}

0 Likes

Success.

Shopify Partner
95 9 10

@GiftsABliss 

Put this piece of code inside your theme.scss file

#section-cta {
  text-align: center;
}
Shopify help
denisaksutik@gmail.com
0 Likes
Highlighted
Tourist
10 1 1

I didn't have a theme.scss file, but I had a styles.scss.liquid file and a theme.js.liquid file.

I don't know why I don't have it.

 

It worked when I put #section-cta { text-align: center; } in the styles.scss file though. 

 

Thank you very much for your help mtclmn and Dennis. 

0 Likes