I want to align this " Connect with us " text to the center, please help
Code -
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
max-width: 120rem;
padding-left:1rem;
padding-right:1rem;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-left:5rem;
padding-right:5rem;
}
}
.ss-instafeed-container {
display:flex;
justify-content:space-between;
align-items: center;
}
.ss-ig-button {
height:100px;
width:120px;
border-radius:12px;
border: 0.2rem solid {{section.settings.text-color}};
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-decoration: none;
color: {{section.settings.text-color}};
padding:5px;
}
.ss-instafeed-header {
color:{{section.settings.text-color}};
font-size:{{section.settings.header_size}}px;
font-weight:800;
text-transform: uppercase;
letter-spacing: 1px;
margin:0px;
line-height:1;
}
.ss-instafeed-hashtag {
color:{{section.settings.text-color}};
font-size: {{section.settings.hashtag_size}}px;
margin:0px;
line-height: 1.2;
word-break: break-word;
text-align:center;
}
.ss-isntafeed-img-wrapper {
width:100%;
display: flex;
flex-wrap: wrap;
margin:0;
padding:0 {{section.settings.padding_image}}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
margin-top:30px;
justify-content: center;
}
.ss-gallery_all-item a img, .ss-gallery_all-item a svg {
max-width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.ss-gallery_all-item {
width: calc(25%);
aspect-ratio: 1 / 1;
padding: {{section.settings.padding_image}}px;
}
.ss-gallery_all-item a {
display: block;
height: 100%;
position: relative;
}
.ss-ig-button p {
font-size: {{section.settings.handle_size}}px;
margin:6px 0 0 0;
line-height:1;
word-break: break-word;
text-align:center;
}
.ss-gallery_all-item:hover {
background-color: {{section.settings.background-color}};
opacity:0.6;
}
@media screen and (max-width: 750px) {
.ss-gallery_all-item {
width: calc(50%);
}
.ss-instafeed-hashtag {
font-size:{{ section.settings.hashtag_size | times: 0.75 | round: 0 }}px;
}
.ss-instafeed-header {
font-size:{{ section.settings.header_size | times: 0.75 | round: 0 }}px;
}
.ss-gallery_all-item {
padding: {{section.settings.padding_image | times: 0.75 | round: 0 }}px;
}
.ss-isntafeed-img-wrapper {
padding:0 {{section.settings.padding_image | times: 0.75 | round: 0 }}px;
}
.ss-ig-button {
height: 80px;
width: 100px;
}
.ss-gallery_all-item:nth-last-child(-n+{{section.settings.hide_image_mobile}}) {
display:none;
}
}
{%- endstyle -%}
{% schema %}
{
“name”: “Instafeed”,
“class”: “section”,
“tag”: “section”,
“settings”: [
{
“type”: “header”,
“content”: “Colors”
},
{
“type”: “color”,
“label”: “Section background color”,
“id”: “background-color”,
“default”: “#002F30”
},
{
“type”: “color”,
“label”: “Text + icon color”,
“id”: “text-color”,
“default”: “#FFFFFF”
},
{
“type”: “header”,
“content”: “Other”
},
{
“type”: “range”,
“id”: “hide_image_mobile”,
“min”: 0,
“max”: 16,
“step”: 2,
“label”: “Hide last images on mobile”,
“default”: 0
},
{
“type”: “url”,
“id”: “insta_url”,
“label”: “Instagram box url”
},
{
“type”: “header”,
“content”: “Text”
},
{
“type”: “text”,
“id”: “instafeed_title”,
“label”: “Instafeed title”,
“default”: “Join the movement”
},
{
“type”: “text”,
“id”: “hashtag_title”,
“label”: “Hashtag”,
“default”: “#BrandHashtag”
},
{
“type”: “text”,
“id”: “insta_handle”,
“label”: “Instagram handle”,
“default”: “@yourhandle”
},
{
“type”: “header”,
“content”: “Font size”
},
{
“type”: “range”,
“id”: “header_size”,
“min”: 12,
“max”: 50,
“step”: 2,
“unit”: “px”,
“label”: “Instafeed title”,
“default”: 18
},
{
“type”: “range”,
“id”: “hashtag_size”,
“min”: 12,
“max”: 50,
“step”: 2,
“unit”: “px”,
“label”: “Instafeed title”,
“default”: 36
},
{
“type”: “range”,
“id”: “handle_size”,
“min”: 8,
“max”: 20,
“step”: 2,
“unit”: “px”,
“label”: “Handle”,
“default”: 12
},
{
“type”: “header”,
“content”: “Section padding”
},
{
“type”: “range”,
“id”: “padding_image”,
“min”: 0,
“max”: 100,
“step”: 2,
“unit”: “px”,
“label”: “Image padding”,
“default”: 0
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “Padding top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “Padding bottom”,
“default”: 36
}
],
“blocks”: [
{
“type”: “image”,
“name”: “Gallery photo”,
“settings”: [
{
“type”: “image_picker”,
“id”: “gallery_photo”,
“label”: “Image”
},
{
“type”: “url”,
“id”: “gallery_url”,
“label”: “Url”
}
]
}
],
“presets”: [
{
“name”: “Instafeed”,
“blocks”: [
{
“type”: “image”
},
{
“type”: “image”
},
{
“type”: “image”
},
{
“type”: “image”
},
{
“type”: “image”
},
{
“type”: “image”
},
{
“type”: “image”
},
{
“type”: “image”
}
]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
