Hi @Comari
While I seen your posts and know your store, there are other who may not. So please to include your store link, and specific page, when posting questions. And no need for quotes for answer from Shopify support, it really is not.
For empty space, first check settings and find button, there is a link but no button text so it still takes space. If you remove link it should be hidden. If not add this to Custom CSS of that section
.brush-upper-btn {
display: none;
}
Second thing is a big top margin of image try to override with this code in same section.
.bottom-images-container {
margin-top: 0;
}
Or value in px that you want.
For second question, ideally you can create a separate section that have hr HTML element but code it with all features you want. But that is a custom work.
You can crate Custom liquid section and add code
<hr class="custom-hr">
<style>
.custom-hr {
border: none;
border-top: 2px solid #333;
margin: 30px auto;
width: 80%;
}
</style>
And control padding in section plus marking, color thickness in code.
EDIT: Oh well, here is AI-generated code for the custom section. Create a new section in Edit theme code, by first selection section and clicking on new file icon. Name it
divider.liquid
Here is full code you need to copy in that new file
{% style %}
.section-{{ section.id }} {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
.divider-{{ section.id }} {
width: {{ section.settings.width }};
border: none;
border-top: {{ section.settings.thickness }}px {{ section.settings.style }} {{ section.settings.color }};
height: 0;
margin-left: {% if section.settings.alignment == 'center' %}auto{% elsif section.settings.alignment == 'right' %}auto{% else %}0{% endif %};
margin-right: {% if section.settings.alignment == 'center' %}auto{% elsif section.settings.alignment == 'left' %}auto{% else %}0{% endif %};
}
{% endstyle %}
<div class="section-{{ section.id }}">
<hr class="divider-{{ section.id }}">
</div>
{% schema %}
{
"name": "Divider / HR",
"settings": [
{
"type": "color",
"id": "color",
"label": "Line color",
"default": "#000000"
},
{
"type": "range",
"id": "thickness",
"label": "Line thickness (px)",
"min": 1,
"max": 10,
"step": 1,
"default": 1
},
{
"type": "text",
"id": "width",
"label": "Line width (px or %)",
"default": "100%"
},
{
"type": "select",
"id": "alignment",
"label": "Alignment",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" }
],
"default": "center"
},
{
"type": "select",
"id": "style",
"label": "Line style",
"options": [
{ "value": "solid", "label": "Solid" },
{ "value": "dashed", "label": "Dashed" },
{ "value": "dotted", "label": "Dotted" }
],
"default": "solid"
},
{
"type": "range",
"id": "padding_top",
"label": "Top spacing (px)",
"min": 0,
"max": 200,
"step": 4,
"default": 20
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom spacing (px)",
"min": 0,
"max": 200,
"step": 4,
"default": 20
}
],
"presets": [
{
"name": "Divider"
}
]
}
{% endschema %}
Have fun.
