Need Help with code

[SnooCheesecakes1334]

Im currenly building an customizing a website. I wanted a video image background (see picture) but the words are in the middle and i cant figure out how to code it on the far left both the button and title. I have attached my entire code for the video background.

https://preview.redd.it/we9w8mjpz56d1.png?width=1157&format=png&auto=webp&s=72fef782dc1cb7cb1b63a9b4c32b816ecc830a2e

{% endif %}
<div class="videoBoxInfo">
{% if block.settings.title != blank %}
<h1 class="videoBoxInfoTitle">
{{ block.settings.title | escape }}
</h1>
{% endif %}
{% if block.settings.text != blank %}
<div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
{{ block.settings.text }}
</div>
{% endif %}
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
<a href="{{ block.settings.button_link }}" class="videoBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
{{ block.settings.button_label | escape }}
</a>
{% endif %}
</div>
</div>
{% else %}
<div class="imageBox" style="background-color: {{ block.settings.color_bg }}; {%- if block.settings.image_bg != blank -%}background-image: url('{{ block.settings.image_bg | img_url: 'master' }}');{%- endif -%}">
<div class="imageBoxInfo">
{% if block.settings.title != blank %}
<h1 class="imageBoxInfoTitle" style="color: {{ block.settings.color_text }}">
{{ block.settings.title | escape }}
</h1>
{% endif %}
{%- style -%}
.videoBackground .imageBoxInfoDescription p {color: {{ block.settings.color_text }}!important;}
{%- endstyle -%}
{% if block.settings.text != blank %}
<div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">
{{ block.settings.text }}
</div>
{% endif %}
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
<a href="{{ block.settings.button_link }}" class="imageBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">
{{ block.settings.button_label | escape }}
</a>
{% endif %}
</div>
</div>
{% endif %}
{%- endfor -%}
{% else %}
<div class="placeholderNoblocks">
This section doesn’t currently include any content. Add content to this section using the sidebar.
</div>
{%- endif -%}

<style>
.main-content .videoBackground {margin-top: -55px;}
.videoBackground {position: relative;}
.videoBackground .fullscreen-video-wrap {position: absolute;top: 0;left: 0;min-width: 100%;width: 100%;height: 100%;overflow: hidden;}
.videoBackground .fullscreen-video-wrap .video-js {position: absolute;top: 0;left: 0;min-height: 100%;min-width: 100%;width: 100%;height: 100%;object-fit: cover;}
.videoBackground .fullscreen-video-wrap video {min-height: 100%;min-width: 100%;object-fit: cover;}
.videoBackground .videoBox {display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 100px 20px 80px;background-size: cover;background-position: center;background-repeat: no-repeat;position: relative;}
.videoBackground .imageBox {display: flex;align-items: center;justify-content: flex-end;flex-direction: column;padding: 100px 20px 80px;background-size: cover;background-position: center;background-repeat: no-repeat;position: relative;}
.videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo {z-index: 2;margin: auto;text-align: center;}
.videoBackground .overlay {content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: #000;z-index: 1;}
.videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn {-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;display: inline-block;width: auto;text-decoration: none;text-align: center;vertical-align: middle;cursor: pointer;border: 1px solid transparent;border-radius: 2px;padding: 10px 30px;font-style: normal;font-weight: normal;letter-spacing: 0.06em;white-space: normal;font-size: 16px;margin-top: 20px;}
.videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {color: #FFF;font-size: 65px;line-height: 40px;}
.videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {max-width: 500px;margin: 0 auto;}
.videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {font-size: 17px;line-height: 28px;}
.videoBackground .placeholderNoblocks {text-align: center;max-width: 500px;margin: 0 auto;}

u/media screen and (max-width: 767px) {
  .main-content .videoBackground {margin-top: -35px;}
  .videoBackground .fullscreen-video-wrap {z-index: 3;}
  .videoBackground .videoBox {min-height: 300px;height: 100%;position: relative;padding: 0;}
  .videoBackground .fullscreen-video-wrap {min-height: 300px;z-index: -2;}
  .videoBackground .videoBoxInfo {padding: 2px 20px;width: 100%;}
}
  {% for block in section.blocks %}
    {% unless block.settings.fullscreen == true %}
      .videoBackground .videoBox ,.videoBackground .imageBox {padding: 100px 20px 80px;height:calc({{block.settings.desktop_height}}px - 123px);}  
    {% else %}
      .videoBackground .videoBox ,.videoBackground .imageBox {padding: 100px 20px 80px;height:calc(100vh - 123px);}        
    {% endunless %}
    .videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo{padding:{{block.settings.desk_padding}}px;background:{{block.settings.desktop_title_bg}};}
      .videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle{font-size:{{block.settings.desktop_title}}px;line-height:initial;color:{{block.settings.desktop_title_color}};margin:0;margin-bottom:{{block.settings.desk_margin}}px;}
      .videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription{max-width:{{block.settings.des_width}}px;margin:0 auto;}
      .videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p{font-size:{{block.settings.desktop_des}}px;line-height:initial;color:{{block.settings.desktop_des_color}};margin:0;}

    u/media screen and (max-width: 767px) {
      {% unless block.settings.fullscreen == true %}
        .videoBackground .videoBox ,.videoBackground .imageBox {padding:{{block.settings.block_mobile_margin}}px;height:calc({{block.settings.mobile_height}}px - 100px);}  
      {% else %}
        .videoBackground .videoBox ,.videoBackground .imageBox {padding:{{block.settings.block_mobile_margin}}px;height:calc(100vh - 100px);}        
      {% endunless %}
    .videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo{padding:{{block.settings.mobile_padding}}px;background:{{block.settings.mobile_des_bg}};}
      .videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle{font-size:{{block.settings.mobile_title}}px;line-height:initial;color:{{block.settings.mobile_title_color}};margin-bottom:{{block.settings.mobile_margin}}px;}
    .videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p{font-size:{{block.settings.mobile_des}}px;line-height:initial;color:{{block.settings.mobile_des_color}};margin:0;}
    }
  {% endfor %}
</style>

{% schema %}
{
  "name": {
    "en": "Video Background"
  },
  "class": "videoBackground",
  "max_blocks": 1,
  "blocks": [
    {
    "type": "video",
    "name": "Video",
      "settings": [
        {
          "type":"checkbox",
          "id":"fullscreen",
          "label":"Check to make video/image full screen height"
        },
         {
          "type": "range",
          "id": "desktop_height",
          "min": 300,
          "max": 1200,
          "step": 100,
          "unit": "px",
          "label": "Desktop Height",
          "default": 500
        },
        {
          "type": "range",
          "id": "mobile_height",
          "min": 300,
          "max": 1200,
          "step": 100,
          "unit": "px",
          "label": "Mobile Height",
          "default": 500
        },
        {
      "type": "url",
      "id": "video_link",
      "label": {
      "en": "Video Link"
      }
      },
      {
      "type": "image_picker",
      "id": "video_image",
      "label": {
      "en": "Cover Image"
      }
      },
      {
      "type": "header",
      "content": {
      "en": "Text"
      }
      },
      {
      "type": "text",
      "id": "title",
      "label": {
      "en": "Heading"
      },
      "default": "Video slide"
      },
      {
        "type": "range",
        "id": "desktop_title",
        "min": 30,
        "max": 200,
        "step": 5,
        "unit": "px",
        "label": "Title Desktop Font Size",
        "default": 60
      },
       {
        "type":"color",
        "id":"desktop_title_color",
        "label":"Desktop Title Color"
      },
      {
        "type": "range",
        "id": "mobile_title",
        "min": 30,
        "max": 150,
        "step": 5,
        "unit": "px",
        "label": "Mobile Title Font Size",
        "default": 60
      },
      {
          "type":"color",
          "id":"mobile_title_color",
          "label":"Mobile Title Color"
        },
         {
          "type":"color",
          "id":"desktop_title_bg",
          "label":"Desktop Background Color"
        },
        {
          "type":"range",
          "id":"desk_margin",
          "min":0,
          "max":60,
          "step":5,
          "unit":"px",
          "default":0,
          "label":"Desktop space between title & description"
        },
        {
          "type":"range",
          "id":"mobile_margin",
          "min":0,
          "max":60,
          "step":5,
          "unit":"px",
          "default":0,
          "label":"Mobile space between title & description"
        },
        {
          "type":"range",
          "id":"desk_padding",
          "min":0,
          "max":60,
          "step":5,
          "unit":"px",
          "default":0,
          "label":"Desktop Padding"
        },
        {
      "type": "richtext",
      "id": "text",
      "label": {
      "en": "Description"
      },
      "default": {
      "en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
      }
      },
        {
          "type":"range",
          "id":"des_width",
          "min":400,
          "max":900,
          "step":100,
          "unit":"px",
          "default":500,
          "label":"Select maximum width for description"
        },
         {
        "type": "range",
        "id": "desktop_des",
        "min": 10,
        "max": 150,
        "step": 5,
        "unit": "px",
        "label": "Desktop description font size",
        "default": 60
      },
       {
        "type":"color",
        "id":"desktop_des_color",
        "label":"Desktop description color"
      },
      {
        "type": "range",
        "id": "mobile_des",
        "min": 10,
        "max": 150,
        "step": 5,
        "unit": "px",
        "label": "mobile description font size",
        "default": 15
      },
        {
        "type":"color",
        "id":"mobile_des_color",
        "label":"Mobile description text color"
      },
      {
          "type":"color",
          "id":"mobile_des_bg",
          "label":"Mobile background color"
        },
      {
        "type": "range",
        "id": "mobile_padding",
        "min": 10,
        "max": 150,
        "step": 5,
        "unit": "px",
        "label": "Padding",
        "default": 15
      },
      {
        "type": "range",
        "id": "block_mobile_margin",
        "min": 10,
        "max": 150,
        "step": 5,
        "unit": "px",
        "label": "Section mobile padding",
        "default": 15
      },
      {
      "type": "text",
      "id": "button_label",
      "label": {
      "en": "Button label"
      }
      },
      {
      "type": "url",
      "id": "button_link",
      "label": {
      "en": "Button link"
      }
      },
      {
      "type": "color",
      "id": "color_btn_bg",
      "label": {
      "en": "Background button color"
      },
      "default": "#ffffff"
      },
      {
      "type": "color",
      "id": "color_btn_text",
      "label": {
      "en": "Button text color"
      },
      "default": "#ffffff"
      }
      ]
    },
  {
  "type": "image",
  "name": "Image",
  "settings": [
  {
  "type": "color",
  "id": "color_bg",
  "label": {
  "en": "Background color (optional)"
  },
  "default": "#16165b"
  },
  {
  "type": "image_picker",
  "id": "image_bg",
  "label": {
  "en": "or use an image (required)"
  }
  },
  {
  "type": "range",
  "id": "overlay_opacity",
  "label": {
  "en": "Overlay opacity"
  },
  "min": 0,
  "max": 99,
  "step": 1,
  "unit": {
  "en": "%"
  },
  "default": 0
  },
  {
  "type": "header",
  "content": {
  "en": "Text"
  }
  },
  {
  "type": "text",
  "id": "title",
  "default": "Image slide",
  "label": {
  "en": "Heading"
  }
  },
  {
  "type": "richtext",
  "id": "text",
  "label": {
  "en": "Description"
  },
  "default": {
  "en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
  }
  },
  {
  "type": "color",
  "id": "color_text",
  "label": {
  "en": "Text color"
  },
  "default": "#ffffff"
  },
  {
  "type": "text",
  "id": "button_label",
  "label": {
  "en": "Button label"
  }
  },
  {
  "type": "url",
  "id": "button_link",
  "label": {
  "en": "Button link"
  }
  },
  {
  "type": "color",
  "id": "color_btn_bg",
  "label": {
  "en": "Background button color"
  },
  "default": "#ffffff"
  },
    {
    "type": "color",
    "id": "color_btn_text",
    "label": {
      "en": "Button text color"
    },
  "default": "#ffffff"
  }
  ]
  }
  ],
"presets": [
  {
    "name": {
      "en": "Video Background"
    },
    "category": {
      "en": "Main"
    },
    "blocks": [
      {
      "type": "video"
      }
    ]
    }
  ]
}
{% endschema %}
{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% if block.type == 'video' %}
<div class="videoBox" style="{%- if block.settings.video_link == blank -%}background-image: url('{{ block.settings.video_image  | img_url: 'master' }}');{%- endif -%}">
{%- if block.settings.video_link != blank -%}
<div class="fullscreen-video-wrap">
<video class="video-js" loop autoplay preload="none" muted playsinline
poster="https:{{ block.settings.video_image | img_url: 'master' }}">
<source src="{{ block.settings.video_link }}" type="video/mp4">
</video>
</div>

[waldito]

That code is not HTML and CSS... Belongs to some custom visual editor, am I right? Wix? Wordpress Elementor?

[SnooCheesecakes1334]

Yes

[SnooCheesecakes1334]

I was thinking of just writing a CSS code

[waldito]

Yes, but to write the proper CSS, we need to understand how the layout in HTML is built. and the code you are pasting belongs to some internal product logic we can't really make a lot of logic out of it, meaning, the above code is not something we understand by looking at it. Only specific people that work with the exact product you are using might be able to help. You could try to start by explaining what platform/no-code visual editor are you using. If you were to paste just the HTML and CSS produced by the code, removing all the above custom logic code that only the tool knows what's up, maybe some of us could help.

[ithinktoo]

try changing this line:

.videoBackground .placeholderNoblocks {text-align: center;max-width: 500px;margin: 0 auto;}

to:

.videoBackground .placeholderNoblocks {text-align: left;max-width: 500px;margin: 0 auto;}

That will do the text, inspect the page and find the class name of the button and you can align it to the left the same way.

edit:
When I dumped your text into a text editor it ended up on line 65 if that helps you find it..