Dear community,
I’ve recently added a new button to the video section on my website. I made sure it looks and functions like the other buttons on my homepage. However, I’m facing a challenge with its alignment—it’s not centered on the desktop view, and the margins seem off compared to other elements.
Although I managed to center it on mobile devices, aligning it on desktop has been troublesome. I’m aiming for consistency with how the other buttons are coded and prefer not to use a hard-coded solution unless absolutely necessary.
To help clarify the issue, I’m sharing the .liquid and base.css code and attaching two screenshots, desktop and mobile.
Your guidance and expertise on this matter would be immensely valuable. Thank you!
base.css:
/* Center the button container on all screen sizes */
.video-section__button-container {
display: flex; /* Establish flex container */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
margin-top: 20px; /* Space above the button */
margin-bottom: 20px; /* Space below the button */
}
/* Ensure the button is also centered on smaller screens */
@media screen and (max-width: 749px) {
.video-section__button-container {
flex-direction: column; /* Stack flex items vertically on small screens */
padding: 20px 1.5rem; /* Adjust padding for small screens */
}
video.liquid:
{{ 'video-section.css' | asset_url | stylesheet_tag }}
{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
@media screen and (max-width: 768px) {
.video-section {
/* max-width: 0px !important; */
}
}
{%- endstyle -%}
{%- liquid
assign video_id = section.settings.video.id | default: section.settings.video_url.id
assign video_alt = section.settings.video.alt | default: section.settings.description
assign alt = 'sections.video.load_video' | t: description: video_alt | escape
assign poster = section.settings.cover_image
if section.settings.video != null
assign ratio_diff = section.settings.video.aspect_ratio | minus: poster.aspect_ratio | abs
if ratio_diff < 0.01 and ratio_diff > 0
assign fix_ratio = false
endif
endif
-%}
{%- capture sizes -%}
{% if section.settings.full_width -%}
100vw
{%- else -%}
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px)
calc(100vw - 10rem), 100vw
{%- endif %}
{%- endcapture -%}
{%- unless section.settings.heading == blank -%}
## {{ section.settings.heading }}
{%- endunless -%}
{%- if section.settings.button_label != blank -%}
{{ section.settings.button_label | escape }}
{%- endif -%}
{% schema %}
{
"name": "t:sections.video.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "inline_richtext",
"id": "heading",
"default": "Video",
"label": "t:sections.video.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "t:sections.video.settings.enable_video_looping.label",
"default": false
},
{
"type": "header",
"content": "t:sections.video.settings.header__1.content"
},
{
"type": "video",
"id": "video",
"label": "t:sections.video.settings.video.label"
},
{
"type": "header",
"content": "t:sections.video.settings.header__2.content"
},
{
"type": "paragraph",
"content": "t:sections.video.settings.paragraph.content"
},
{
"type": "video_url",
"id": "video_url",
"accept": ["youtube", "vimeo"],
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
"label": "t:sections.video.settings.video_url.label",
"info": "t:sections.video.settings.video_url.info"
},
{
"type": "image_picker",
"id": "cover_image",
"label": "t:sections.video.settings.cover_image.label"
},
{
"type": "text",
"id": "description",
"label": "t:sections.video.settings.description.label",
"info": "t:sections.video.settings.description.info"
},
{
"type": "range",
"id": "video-size",
"min": 0,
"max": 2000,
"step": 20,
"unit": "px",
"label": "Video Width",
"default": 1200
},
{
"type": "header",
"content": "t:sections.video.settings.header__3.content"
},
{
"type": "checkbox",
"id": "full_width",
"label": "t:sections.video.settings.full_width.label",
"default": false
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "background-1"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
},
// Button label setting
{
"type": "text",
"id": "button_label",
"label": "Button label",
"default": "Click me"
},
// Button link setting
{
"type": "url",
"id": "button_link",
"label": "Button link"
}
],
"presets": [
{
"name": "t:sections.video.presets.name"
}
]
}
{% endschema %}
