Please see error code below. I am attaching two images below, one shows the home page without the mobile screens (from the laptop) and the other image is for same screen that shows the mobile screens (cellphone). mobile.
Hi @BLDT ,
Please send me link preview site, I will check it for you
here is the website: https://bldt.ca/
Hi @BLDT ,
Please send me the password. I will check it.
password: unuste
Hi @BLDT ,
Go to Assets > base.css and paste this at the bottom of the file:
.section-template--15508827832488__16503291948265fe81-padding .footer-block__details-content {
margin-bottom: 4rem !important;
}
Hope it helps!
The code you provided didn’t resolve the issue unfortunately. Is there
anything else I can do?
Hi @BLDT ,
Can you send me the code of the file showing this, I will help you to remove lazyload for the image, it will display fine.
Because this error is caused by lazyloading the image
I removed lazyloading and it is still not working. I have attempted to copy
and paste the code a couple of times in the email, but it failed to send!
Hi @BLDT ,
You can upload the code to https://pastebin.com/ and send me the link. I will check it.
posted the code on https://pastebin.com/VBTDvbEq.
Hi @BLDT ,
Please change code:
{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}
{{ 'newsletter-section.css' | asset_url | stylesheet_tag }}
{{ 'section-footer.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-left: 80px;
padding-right: 80px;
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;
}
}
.header__wrapper {
background: #212121 url('{{ 'map_transparent_white-1.png' | asset_url }}') !important;
}
.main-header{
text-align: left;
color: #fff;
font-weight: 700;
font-size: 60px;
line-height: 60px;
margin: 20px 0 !important;
}
.main-header-yellow{
color: #ffd311;
text-align: left;
font-weight: 700;
font-size: 60px;
line-height: 60px;
margin: 20px 0 !important;
}
.subtext{
text-align: left;
color: #fff;
}
.subtext-yellow{
text-align: left;
color: #ffd311;
}
.subtext-bold{
text-align: left;
color: #fff;
font-weight: 700;
}
@media screen and (max-width: 480px) {
.section-{{ section.id }}-padding {
padding-left:20px;
padding-right:20px;
}
.main-header{
font-size: 40px;
line-height: 40px;
}
.main-header-yellow{
font-size: 40px;
line-height: 40px;
}
.right-img{
width: 200px !important;
transform: rotate(360deg) !important;
}
.btn-1{
width: 110px !important;
}
.btn-2{
width: 120px !important;
}
}
.row {
display: flex;
align-content: center;
align-items: center;
}
.column {
}
.btns{
padding-top: 20px;
}
.right-img{
width: 200px;
transform: rotate(350deg);
}
.btn-1{
width:150px;
}
.btn-2{
width:166px
}
{%- endstyle -%}
{%- for block in section.blocks -%}
{%- if block.settings.heading != blank -%}
## {{- block.settings.heading | escape -}}
## {{- block.settings.yellowheading | escape -}}
## {{- block.settings.secondheading | escape -}}
{%- endif -%}
{%- case block.type -%}
{%- when 'text' -%}
{{ block.settings.subtext }}
{{ block.settings.yellowsubtext }}
{{ block.settings.subtextbold }}
{%- when 'link_list' -%}
{%- if block.settings.menu != blank and block.settings.heading != blank -%}
{%- for link in block.settings.menu.links -%}
- {{ link.title }}
{%- endfor -%}
{%- endif -%}
{%- when 'image' -%}
{%- if block.settings.image != blank -%}
{%- assign image_size = block.settings.image_width | append: 'x' -%}
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
{% schema %}
{
"name": "Main Header",
"blocks": [
{
"type": "link_list",
"name": "t:sections.footer.blocks.link_list.name",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Quick links",
"label": "t:sections.footer.blocks.link_list.settings.heading.label",
"info": "t:sections.footer.blocks.link_list.settings.heading.info"
},
{
"type": "link_list",
"id": "menu",
"default": "footer",
"label": "t:sections.footer.blocks.link_list.settings.menu.label",
"info": "t:sections.footer.blocks.link_list.settings.menu.info"
}
]
},
{
"type": "text",
"name": "t:sections.footer.blocks.text.name",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Heading",
"label": "t:sections.footer.blocks.text.settings.heading.label"
},
{
"type": "text",
"id": "yellowheading",
"default": "Heading",
"label": "t:sections.footer.blocks.text.settings.heading.label"
},
{
"type": "text",
"id": "secondheading",
"default": "Heading",
"label": "t:sections.footer.blocks.text.settings.heading.label"
},
{
"type": "richtext",
"id": "subtext",
"default": "
Share contact information, store details, and brand content with your customers.
",
"label": "t:sections.footer.blocks.text.settings.subtext.label"
},
{
"type": "richtext",
"id": "yellowsubtext",
"default": "
Share contact information, store details, and brand content with your customers.
",
"label": "t:sections.footer.blocks.text.settings.subtext.label"
},
{
"type": "richtext",
"id": "subtextbold",
"default": "
Share contact information, store details, and brand content with your customers.
",
"label": "t:sections.footer.blocks.text.settings.subtext.label"
},
{
"type": "image_picker",
"id": "image1",
"label": "Button 1 Image"
},
{
"id": "link",
"type": "url",
"label": "Button 1 link"
},
{
"id": "linktext",
"type": "text",
"label": "Button 1 text",
"default": "Click Here"
},
{
"type": "image_picker",
"id": "image2",
"label": "Button 2 Image"
},
{
"id": "link2",
"type": "url",
"label": "Button 2 link"
},
{
"id": "linktext2",
"type": "text",
"label": "Button 2 text",
"default": "Click Here"
}
]
},
{
"type": "textbtn",
"name": "TextBtn",
"settings" : [
{
"type": "text",
"id": "caption",
"default": "Heading",
"label": "t:sections.footer.blocks.text.settings.heading.label"
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "range",
"id": "image_width",
"min": 50,
"max": 200,
"step": 5,
"unit": "px",
"label": "Image width",
"default": 100
},
{
"type": "select",
"id": "alignment",
"label": "Image alignment on large screen",
"options": [
{
"value": "",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
}
]
}
],
"settings": [
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.footer.settings.color_scheme.options__1.label"
},
{
"value": "accent-2",
"label": "t:sections.footer.settings.color_scheme.options__2.label"
},
{
"value": "background-1",
"label": "t:sections.footer.settings.color_scheme.options__3.label"
},
{
"value": "background-2",
"label": "t:sections.footer.settings.color_scheme.options__4.label"
},
{
"value": "inverse",
"label": "t:sections.footer.settings.color_scheme.options__5.label"
}
],
"default": "background-1",
"label": "t:sections.footer.settings.color_scheme.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__1.content",
"info": "t:sections.footer.settings.header__1.info"
},
{
"type": "checkbox",
"id": "newsletter_enable",
"default": true,
"label": "t:sections.footer.settings.newsletter_enable.label"
},
{
"type": "text",
"id": "newsletter_heading",
"default": "Subscribe to our emails",
"label": "t:sections.footer.settings.newsletter_heading.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__2.content",
"info": "t:sections.footer.settings.header__2.info"
},
{
"type": "checkbox",
"id": "show_social",
"default": false,
"label": "t:sections.footer.settings.show_social.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__3.content",
"info": "t:sections.footer.settings.header__4.info"
},
{
"type": "checkbox",
"id": "enable_country_selector",
"default": true,
"label": "t:sections.footer.settings.enable_country_selector.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__5.content",
"info": "t:sections.footer.settings.header__6.info"
},
{
"type": "checkbox",
"id": "enable_language_selector",
"default": true,
"label": "t:sections.footer.settings.enable_language_selector.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__7.content"
},
{
"type": "checkbox",
"id": "payment_enable",
"default": true,
"label": "t:sections.footer.settings.payment_enable.label"
},
{
"type": "header",
"content": "t:sections.all.spacing"
},
{
"type": "range",
"id": "margin_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.footer.settings.margin_top.label",
"default": 0
},
{
"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
}
],
"presets": [
{
"name": "Main Header",
"category": "ADVANCED LAYOUT"
}
]
}
{% endschema %}
{% javascript %}
{% endjavascript %}
Hope it helps!
The image no longer shows on the mobile nor the laptop/desktop after I
added the code. Someone from support may need to access the website and
look into this error and fix it!
You have been added. Please send me an email when you are done.
Thank you, how did you make that change? I need to make the same change on
Share my Tools and Estimate my Project pages as well.
Hi @BLDT ,
You just need to go to home-header.liquid file and copy the code just like the description I sent via screenshot, it will work fine.
Or you can remove lazyload and declare the image normally, as instructed: https://shopify.dev/api/liquid/filters/url-filters#image_url
Hope it helps!