how to move text and button on video background to the far left on trade theme

how to move text and button on video background to the far left on trade theme

saguilera
Visitor
1 0 0

hi here is the code i found online. I would like the text and button icon on the far left at it interferes with the video.   this is for trade theme 14.0

 

{%- 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>
{% 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;}

@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;}

    @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 %}
Replies 2 (2)

mrashid
Shopify Partner
169 17 15

@saguilera store url?

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

PageFly-Noah
Shopify Partner
1317 233 268

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.