Text Size on video banner mobile vs desktop

spacewithak · December 28, 2024, 3:22am

Site: https://www.annakaiserstudios.com/?_ab=0&_fd=0&_sc=1
Looking to remove search bar icon in header and
For my video banner- I’m looking for some assistance with removing the black button outline, as well as making the text larger on desktop? Perhaps making the space In between the text for both mobile and desktop smaller as well?
current desktop screen grab:

current mobile screen grab:

I recently downloaded the “wibleep” Shopify app to install a video banner on my dawn theme, which has the code as follows:

{% for source in section.settings.video_link_desktop.sources -%} {% assign video_url = source.url %} {%- endfor %} {% for source in section.settings.video_link_mobile.sources -%} {% assign video_url_mobile = source.url %} {% if video_url_mobile == blank %} {% assign video_url_mobile = video_url %} {% endif %} {%- endfor %} {% if section.settings.video_link_mobile == blank %} {% assign video_url_mobile = video_url %} {% endif %}

{%- for block in section.blocks -%} {%- case block.type -%} {%- when 'heading' -%}

{%- when 'text' -%}

{%- when 'buttons' -%}

{%- if block.settings.button_label_1 != blank -%} {{ block.settings.button_label_1 | escape }} {%- endif -%} {%- if block.settings.button_label_2 != blank -%} {{ block.settings.button_label_2 | escape }} {%- endif -%}

{%- endcase -%} {%- endfor -%}

{%- style -%}

.wibleep-custom-video-section {
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.wibleep-custom-video-section video {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
left: 0;
top: 0;
}
.wibleep-custom-video-section .banner__box {
padding: 30px 50px 40px 50px;
text-align: center;
z-index: 2;
}
.banner__buttons a.button {
padding: 10px;
}
.wibleep-custom-video-section .banner__text{
margin-bottom: 20px;
}
.wibleep-custom-video-section .banner__buttons > :not(:last-child) {
margin-right: 15px;
font-weight: 600;
}
.wibleep-custom-video-section .banner__buttons {
margin-top: 25px;
font-weight: 600;
}
.wibleep-custom-video-section{
height: calc(100vw{{ section.settings.mobile_aspect_ratio }})
}

@media only screen and (min-width: 767px) {
.wibleep-custom-video-section.small {
min-height: 42rem;
}
.wibleep-custom-video-section.medium {
min-height: 56rem;
}
.wibleep-custom-video-section.large {
min-height: 72rem;
}
.wibleep-custom-video-section .banner__box {
{% if section.settings.banner-top > -1 or section.settings.banner-left> -1 %}
position: absolute;
top: {{ section.settings.banner-top }}%;
left: {{ section.settings.banner-left }}%;
{% endif %}
}
.wibleep-custom-video-section{
height: calc(100vw*{{section.settings.desktop_aspect_ratio}})
}
.wibleep-custom-video-section .banner__box {
width: {{ section.settings.banner-max-width }}%;
}
}

@media only screen and (max-width: 767px) {
.wibleep-custom-video-section .banner__box {
margin-top: {{ section.settings.mobile-banner-top }}%;
}
.wibleep-custom-video-section .banner__buttons > *:not(:last-child) {
margin-right: unset;
margin-bottom: 10px;
}
video.desktop-video-url {
display: none;
}
video.mobile-video-url {
display: block !important;
}
.wibleep-custom-video-section .banner__buttons {
text-align: center;
display: grid;
width: 180px;
margin: 0 auto;
}
.wibleep-custom-video-section .banner__buttons > a {
width: 100%;
}
.wibleep-custom-video-section .banner__box {
width: 95%;
padding: 25px 20px 35px 20px !important;
}
}

{% if section.settings.show_on_devices == ‘mobile_only’ %}
@media only screen and (min-width: 767px) {
.wibleep-custom-video-section{
display: none !important;
}
}
{% endif%}
{% if section.settings.show_on_devices == ‘desktop_only’ %}
@media only screen and (max-width: 767px) {
.wibleep-custom-video-section{
display: none !important;
}
}
{% endif %}
{%- endstyle -%}

{% schema %}
{
“name”: “Wibleep Video Banner”,
“tag”: “section”,
“class”: “section”,
“settings”: [
{
“type”: “header”,
“content”: “Wibleep Customization Support”,
“info”: “For any customizations required in this section, feel free to write to us at contact@adevole.com”
},
{
“type”: “video”,
“id”: “video_link_desktop”,
“label”: “Desktop Video .mp4 link”
},
{
“type”: “video”,
“id”: “video_link_mobile”,
“label”: “Mobile Video .mp4 link”
},
{
“type”: “color”,
“id”: “overlay_bg_color”,
“default”: “transparent”,
“label”: “Overlay Background Color”
},
{
“type”: “range”,
“id”: “image_overlay_opacity”,
“min”: 0,
“max”: 1,
“step”: 0.1,
“unit”: “%”,
“label”: “Overlay Opacity”,
“default”: 0.8
},
{
“type”: “select”,
“id”: “video_height”,
“options”: [
{
“value”: “small”,
“label”: “Small”
},
{
“value”: “medium”,
“label”: “Medium”
},
{
“value”: “large”,
“label”: “Large”
}
],
“default”: “medium”,
“label”: “Minimum Height of Video Section”
},
{
“type”: “range”,
“id”: “desktop_aspect_ratio”,
“min”: 0,
“max”: 2,
“step”: 0.1,
“label”: “Desktop Aspect Ratio”,
“default”: 0.2,
“info”: “Will control the height of video with respect to width, 1 = square image”
},
{
“type”: “range”,
“id”: “mobile_aspect_ratio”,
“min”: 0,
“max”: 2,
“step”: 0.1,
“label”: “Mobile Aspect Ratio”,
“default”: 1.2,
“info”: “Will control the height of video with respect to width, 1 = square image”
},
{
“type”: “header”,
“content”: “Banner Content Settings”
},
{
“type”: “range”,
“id”: “banner-max-width”,
“min”: 30,
“max”: 100,
“step”: 1,
“unit”: “%”,
“label”: “Desktop Banner Max Width”,
“default”: 60
},
{
“type”: “range”,
“id”: “banner-top”,
“min”: -1,
“max”: 99,
“step”: 1,
“unit”: “%”,
“label”: “Desktop Position Top”,
“info”: “Set top and left to -1 for center align”,
“default”: -1
},
{
“type”: “range”,
“id”: “banner-left”,
“min”: -1,
“max”: 99,
“step”: 1,
“unit”: “%”,
“label”: “Desktop Position Left”,
“info”: “Set top and left to -1 for center align”,
“default”: -1
},
{
“type”: “range”,
“id”: “mobile-banner-top”,
“min”: -100,
“max”: 100,
“step”: 2,
“unit”: “%”,
“label”: “Mobile Position Top”,
“info”: “Set 0 for middle align”,
“default”: 0
},{
“type”: “select”,
“id”: “show_on_devices”,
“label”: “Show On Devices”,
“options”: [
{
“value”: “all”,
“label”: “All”
},
{
“value”: “mobile_only”,
“label”: “Mobile Only”
},
{
“value”: “desktop_only”,
“label”: “Desktop Only”
}
],
“default”: “all”
}
],
“blocks”: [
{
“type”: “heading”,
“name”: “Heading”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “heading”,
“default”: “Video banner”,
“label”: “Heading”
},
{
“type”: “range”,
“id”: “heading_size”,
“min”: 10,
“max”: 100,
“step”: 2,
“default”: 32,
“label”: “Heading Size”
},
{
“type”: “color”,
“id”: “heading_color”,
“default”: “#ffffff”,
“label”: “Heading Color”
}
]
},
{
“type”: “text”,
“name”: “Text”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “text”,
“default”: “Give customers details about the banner video(s) or content on the template.”,
“label”: “Description”
},
{
“type”: “range”,
“id”: “description_size”,
“min”: 10,
“max”: 100,
“step”: 2,
“default”: 16,
“label”: “Description Size”
},
{
“type”: “range”,
“id”: “description_line_height”,
“min”: 0,
“max”: 100,
“step”: 1,
“default”: 0,
“label”: “Line Height”
},
{
“type”: “color”,
“id”: “description_color”,
“default”: “#ffffff”,
“label”: “Description Color”
}
]
},
{
“type”: “buttons”,
“name”: “Buttons”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “button_label_1”,
“default”: “Button label”,
“label”: “Button Label”
},
{
“type”: “url”,
“id”: “button_link_1”,
“label”: “Button Link”
},
{
“type”: “color”,
“id”: “button_bg_color_1”,
“default”: “#fefefe”,
“label”: “Button Background Color”
},
{
“type”: “color”,
“id”: “button_color_1”,
“default”: “#111111”,
“label”: “Button Text Color”
},
{
“type”: “text”,
“id”: “button_label_2”,
“default”: “Button label”,
“label”: “Button Label”
},
{
“type”: “url”,
“id”: “button_link_2”,
“label”: “Button Link”
},
{
“type”: “color”,
“id”: “button_bg_color_2”,
“default”: “#111111”,
“label”: “Button Background Color”
},
{
“type”: “color”,
“id”: “button_color_2”,
“default”: “#fefefe”,
“label”: “Button Text Color”
}
]
}
],
“presets”: [
{
“name”: “Wibleep Video Banner”,
“blocks”: [
{
“type”: “heading”
},
{
“type”: “text”
},
{
“type”: “buttons”
}
]
}
]
}
{% endschema %}

suyash1 · December 28, 2024, 3:40am

@spacewithak

please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

.button:after{box-shadow: none !important;}

@media screen and (min-width:750px){
.banner__heading span{font-size:32px !important;}
.banner__text{font-size:28px!important;}
}

spacewithak · December 28, 2024, 3:44am

this did not work

suyash1 · December 28, 2024, 3:47am

@spacewithak - you have added this above css into already existing media query, hence it is not working

spacewithak · December 28, 2024, 3:53am

what does that mean?

suyash1 · December 28, 2024, 3:54am

@spacewithak - code is not structured properly, can you add me as collab? I can do it, it will take few minutes

spacewithak · December 28, 2024, 3:55am

how do I do that?

suyash1 · December 28, 2024, 3:57am

@spacewithak - you can send me collab code, I can send you collab request, if you want you can message code in DM or email below

Topic		Replies	Views
Modify the code of my video banner on the Dawn theme Store Design design , customizations , css , shopify-themes , html	5	374	September 21, 2024
Video Banner header text and button not displayed on mobile Store Design liquid , design , customizations	7	110	December 29, 2024
How to resize my video banner Store Design menu , design , header , landing-page , shopify-themes	1	200	November 17, 2024
Video Section - Dawn Theme - Make video smaller Store Design design	9	111	December 20, 2023
How to fix mobile video banner size and change specific H2 font color? Store Design design , css	2	48	April 5, 2024

Text Size on video banner mobile vs desktop

{{ block.settings.heading | escape }}

Related topics