Centering my custom CTA Button, Help please

Solved
Highlighted
New Member
7 0 0

As subject says
Center the button and also make it not stretch across the entire screen

Using Testament paid theme,
Changes have been made in

Sections liquid: CTA Button 

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

{% schema %}
{
"name": "Call to action",
"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 %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}



Stylesheet.css liquid
.button {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background-color:#ffffff;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#666666;
font-family:lato;
font-size:15px;
font-weight:bold;
text-align: center;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
&:hover {
background-color:#f6f6f6;
}
&:active {
position:relative;
top:1px;
}


Website: https://sahilondon.com/
All Products CTAAll Products CTA

0 Likes
Highlighted

Success.

Trailblazer
131 17 29

Hi,,
Add bellow css in your CSS file-

 

div#section-cta .container {
text-align: center;
For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com
0 Likes
Highlighted

Success.

Shopify Partner
24 5 11

Please use below css to make it perfect

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

#section-cta .container a.button {
width: auto;
line-height: 18px;
padding: 15px 25px;
margin-top: 25px;
}

sahilondon.jpg
Mobile View
sahilondon.jpg

0 Likes