I would like to align my Title + Subtitle + Button with a text width of 30%.
Now I have figured out how to do this manually within the text. The problem with this is that I can't save the text.
Could someone help me how I can adjust my .liquid so that I get the same result. With a working result on mobile and desktop.
**Desktop result:**
- 30% text width
- Align Left
- Center button mind under text
**mobile result:**
-Align text center (not 30%)
-Button
**See image with the red lines for the desired result from the .liquid. I hope to get the text on the image aligned to the left. and NOT centered as in the picture.**
**See image 2(text in the middle) for the current status.**
**See under here for the current .liquid code for image 2 (text in the middle):**
{% if section.settings.img_banner1_mb != blank %}
![_img_banner]()
{% else %}
![_img_banner]()
{% endif %}
{% if section.settings.title_banner != blank %}
{{section.settings.title_banner}}
{% if section.settings.sub_title != blank %}
{{section.settings.sub_title}}
{% endif %}
{% if section.settings.button_1 != blank %}
{{section.settings.button_1}}
{% endif %}
{% endif %}
.section-banner-v2 .banner-box .banner-info .button-shop-{{ section.id }} {
color: {{section.settings.color_btn}};
background: {{section.settings.bg_btn}};
}
.section-banner-v2 .banner-box .banner-info .button-shop-{{ section.id }}:hover {
color: {{section.settings.color_btn_hover}};
background: {{section.settings.bg_btn_hover}};
}
{% schema %}
{
"name": "BANNER V2",
"settings": [
{
"type": "select",
"id": "select_pos",
"label": "Select Position Content",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
},
{
"value": "center",
"label": "Center"
}
],
"default": "left"
},
{
"type": "image_picker",
"id": "img_banner1",
"label": "Backgroud Image for Destop",
"info": "1920 x 850px recommended"
},
{
"type": "image_picker",
"id": "img_banner1_mb",
"label": "Backgroud Image for Mobile",
"info": "500 x 600px recommended"
},
{
"type": "text",
"id": "title_banner",
"label": "Title banner",
"default": "LIVE YOUR HAPPY LIFE!"
},
{
"type": "color",
"id": "color_title",
"label": "Color Title",
"default": "#222"
},
{
"type": "text",
"id": "sub_title",
"label": "Sub Title banner",
"default": "When you’ve got your health, you got everything."
},
{
"type": "color",
"id": "color_sub_title",
"label": "Color Sub Title",
"default": "#222"
},
{
"type": "text",
"id": "button_1",
"label": "button banner",
"default": "SHOP NOW"
},
{
"type": "color",
"id": "color_btn",
"label": "Color Button",
"default": "#fff"
},
{
"type": "color",
"id": "bg_btn",
"label": "Background Button",
"default": "#000"
},
{
"type": "color",
"id": "color_btn_hover",
"label": "Color Button Hover",
"default": "#000"
},
{
"type": "color",
"id": "bg_btn_hover",
"label": "Background Button Hover",
"default": "#fff"
},
{
"type": "url",
"id": "url_button1",
"label": "URL button",
"default": "/collections/all"
},
{
"type": "header",
"content": "Section Space"
},
{
"type": "text",
"id": "margin_top",
"label": "Margin Top",
"info": "Defined in pixels. Do not add the 'px' unit."
},
{
"type": "text",
"id": "margin_bottom",
"label": "Margin Bottom",
"info": "Defined in pixels. Do not add the 'px' unit."
}
],
"presets": [
{
"name": "BANNER V2",
"category": "HOME"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
