API tools faq
paste
Guest User

Pictures are only showing on the phone and not through the desktop/laptop

a guest
Apr 24th, 2022
55
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.75 KB | None | 0 0
raw download clone embed print report
  1. {{ 'component-newsletter.css' | asset_url | stylesheet_tag }}
  2. {{ 'newsletter-section.css' | asset_url | stylesheet_tag }}
  3. {{ 'section-footer.css' | asset_url | stylesheet_tag }}
  4. <link rel="stylesheet" href="{{ 'component-newsletter.css' | asset_url }}" media="print" onload="this.media='all'">
  5. <link rel="stylesheet" href="{{ 'component-list-menu.css' | asset_url }}" media="print" onload="this.media='all'">
  6. <link rel="stylesheet" href="{{ 'component-list-payment.css' | asset_url }}" media="print" onload="this.media='all'">
  7. <link rel="stylesheet" href="{{ 'component-list-social.css' | asset_url }}" media="print" onload="this.media='all'">
  8. <link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
  9. <link rel="stylesheet" href="{{ 'disclosure.css' | asset_url }}" media="print" onload="this.media='all'">
  10.  
  11. <noscript>{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}</noscript>
  12. <noscript>{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}</noscript>
  13. <noscript>{{ 'component-list-payment.css' | asset_url | stylesheet_tag }}</noscript>
  14. <noscript>{{ 'component-list-social.css' | asset_url | stylesheet_tag }}</noscript>
  15. <noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
  16. <noscript>{{ 'disclosure.css' | asset_url | stylesheet_tag }}</noscript>
  17.  
  18.  
  19.  
  20. {%- style -%}
  21. .section-{{ section.id }}-padding {
  22. padding-left: 80px;
  23. padding-right: 80px;
  24. padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
  25. padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  26. }
  27.  
  28. @media screen and (min-width: 750px) {
  29. .section-{{ section.id }}-padding {
  30. padding-top: {{ section.settings.padding_top }}px;
  31. padding-bottom: {{ section.settings.padding_bottom }}px;
  32. }
  33. }
  34. .header__wrapper {
  35. background: #212121 url('{{ 'map_transparent_white-1.png' | asset_url }}') !important;
  36. }
  37.  
  38.  
  39.  
  40. .main-header{
  41.  
  42. text-align: left;
  43. color: #fff;
  44. font-weight: 700;
  45. font-size: 60px;
  46. line-height: 60px;
  47. margin: 20px 0 !important;
  48. }
  49.  
  50. .main-header-yellow{
  51. color: #ffd311;
  52. text-align: left;
  53. font-weight: 700;
  54. font-size: 60px;
  55. line-height: 60px;
  56. margin: 20px 0 !important;
  57. }
  58.  
  59. .subtext{
  60. text-align: left;
  61. color: #fff;
  62. }
  63.  
  64. .subtext-yellow{
  65. text-align: left;
  66. color: #ffd311;
  67. }
  68.  
  69. .subtext-bold{
  70. text-align: left;
  71. color: #fff;
  72. font-weight: 700;
  73. }
  74.  
  75. @media screen and (max-width: 480px) {
  76.  
  77. .section-{{ section.id }}-padding {
  78. padding-left:20px;
  79. padding-right:20px;
  80. }
  81. .main-header{
  82. font-size: 40px;
  83.  
  84. line-height: 40px;
  85. }
  86.  
  87. .main-header-yellow{
  88. font-size: 40px;
  89. line-height: 40px;
  90. }
  91. .right-img{
  92. width: 200px !important;
  93. transform: rotate(360deg) !important;
  94. }
  95.  
  96. .btn-1{
  97. width: 110px !important;
  98. }
  99.  
  100. .btn-2{
  101. width: 120px !important;
  102. }
  103. }
  104.  
  105. .row {
  106. display: flex;
  107. align-content: center;
  108. align-items: center;
  109. }
  110.  
  111. .column {
  112.  
  113. }
  114.  
  115. .btns{
  116. padding-top: 20px;
  117. }
  118.  
  119. .right-img{
  120. width: 200px;
  121. transform: rotate(350deg);
  122. }
  123.  
  124. .btn-1{
  125. width:150px;
  126. }
  127.  
  128. .btn-2{
  129. width:166px
  130. }
  131.  
  132.  
  133. {%- endstyle -%}
  134.  
  135. <div class="center">
  136. <div class="header__wrapper gradient isolate{% if section.settings.full_width %} content-container--full-width{% endif %} section-{{ section.id }}-padding">
  137. <div class=" grid grid--1-col grid--2-col {{ footer_grid_class }}" style="align-items: center;">
  138. {%- for block in section.blocks -%}
  139. <div class="footer-block grid__item{% if block.type == 'link_list' and block.settings.heading != blank %} footer-block--menu{% endif %}" {{ block.shopify_attributes }}>
  140. {%- if block.settings.heading != blank -%}
  141. <h2 class="main-header">{{- block.settings.heading | escape -}}</h2>
  142. <h2 class="main-header-yellow">{{- block.settings.yellowheading | escape -}}</h2>
  143. <h2 class="main-header">{{- block.settings.secondheading | escape -}}</h2>
  144. {%- endif -%}
  145.  
  146. {%- case block.type -%}
  147. {%- when 'text' -%}
  148. <div class="subtext" >
  149. {{ block.settings.subtext }}
  150. </div>
  151. <div class="subtext-yellow" >
  152. {{ block.settings.yellowsubtext }}
  153. </div>
  154. <div class="subtext-bold" >
  155. {{ block.settings.subtextbold }}
  156. </div>
  157. <div class="row">
  158. <div class="column" style="padding-right:15px">
  159. <a href="{{block.settings.link}}" >
  160. <img
  161. srcset= "{{ block.settings.image1 | img_url: image_size }}, {{ block.settings.image1 | img_url: image_size, scale: 2 }} 2x"
  162. src="{{ block.settings.image1 }}"
  163. alt="{{ block.settings.image1.alt | escape }}"
  164.  
  165. class="btn-1"
  166.  
  167. >
  168. </a>
  169. </div>
  170. <div class="column">
  171. <a href="{{block.settings.link2}}" >
  172. <img srcset= "{{ block.settings.image2 | img_url: image_size }}, {{ block.settings.image2 | img_url: image_size, scale: 2 }} 2x"
  173. src="{{ block.settings.image2 }}"
  174. alt="{{ block.settings.image2.alt | escape }}"
  175.  
  176. class="btn-2"
  177.  
  178. >
  179. </a>
  180. </div>
  181. </div>
  182. {%- when 'link_list' -%}
  183. {%- if block.settings.menu != blank and block.settings.heading != blank -%}
  184. <ul class="footer-block__details-content list-unstyled">
  185. {%- for link in block.settings.menu.links -%}
  186. <li>
  187. <a href="{{ link.url }}" class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}">
  188. {{ link.title }}
  189. </a>
  190. </li>
  191. {%- endfor -%}
  192. </ul>
  193. {%- endif -%}
  194. {%- when 'image' -%}
  195. <div class="footer-block__details-content footer-block-image {{ block.settings.alignment }}">
  196. {%- if block.settings.image != blank -%}
  197. {%- assign image_size = block.settings.image_width | append: 'x' -%}
  198. <img
  199. srcset= "{{ block.settings.image }}, {{ block.settings.image | img_url: image_size, scale: 2 }} 2x"
  200. src="{{ block.settings.image }}"
  201. alt="{{ block.settings.image.alt | escape }}"
  202.  
  203.  
  204. class="right-img"
  205. >
  206. {%- else -%}
  207. {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
  208. {%- endif -%}
  209. </div>
  210. {%- endcase -%}
  211. </div>
  212. {%- endfor -%}
  213. </div>
  214.  
  215. </div>
  216. </div>
  217.  
  218. {% schema %}
  219. {
  220. "name": "Main Header",
  221.  
  222. "blocks": [
  223. {
  224. "type": "link_list",
  225. "name": "t:sections.footer.blocks.link_list.name",
  226. "settings": [
  227. {
  228. "type": "text",
  229. "id": "heading",
  230. "default": "Quick links",
  231. "label": "t:sections.footer.blocks.link_list.settings.heading.label",
  232. "info": "t:sections.footer.blocks.link_list.settings.heading.info"
  233. },
  234. {
  235. "type": "link_list",
  236. "id": "menu",
  237. "default": "footer",
  238. "label": "t:sections.footer.blocks.link_list.settings.menu.label",
  239. "info": "t:sections.footer.blocks.link_list.settings.menu.info"
  240. }
  241. ]
  242. },
  243. {
  244. "type": "text",
  245. "name": "t:sections.footer.blocks.text.name",
  246. "settings": [
  247. {
  248. "type": "text",
  249. "id": "heading",
  250. "default": "Heading",
  251. "label": "t:sections.footer.blocks.text.settings.heading.label"
  252. },
  253. {
  254. "type": "text",
  255. "id": "yellowheading",
  256. "default": "Heading",
  257. "label": "t:sections.footer.blocks.text.settings.heading.label"
  258. },
  259. {
  260. "type": "text",
  261. "id": "secondheading",
  262. "default": "Heading",
  263. "label": "t:sections.footer.blocks.text.settings.heading.label"
  264. },
  265. {
  266. "type": "richtext",
  267. "id": "subtext",
  268. "default": "<p>Share contact information, store details, and brand content with your customers.</p>",
  269. "label": "t:sections.footer.blocks.text.settings.subtext.label"
  270. },
  271. {
  272. "type": "richtext",
  273. "id": "yellowsubtext",
  274. "default": "<p>Share contact information, store details, and brand content with your customers.</p>",
  275. "label": "t:sections.footer.blocks.text.settings.subtext.label"
  276. },
  277. {
  278. "type": "richtext",
  279. "id": "subtextbold",
  280. "default": "<p>Share contact information, store details, and brand content with your customers.</p>",
  281. "label": "t:sections.footer.blocks.text.settings.subtext.label"
  282. },
  283. {
  284. "type": "image_picker",
  285. "id": "image1",
  286. "label": "Button 1 Image"
  287. },
  288. {
  289. "id": "link",
  290. "type": "url",
  291. "label": "Button 1 link"
  292. },
  293. {
  294. "id": "linktext",
  295. "type": "text",
  296. "label": "Button 1 text",
  297. "default": "Click Here"
  298. },
  299. {
  300. "type": "image_picker",
  301. "id": "image2",
  302. "label": "Button 2 Image"
  303. },
  304. {
  305. "id": "link2",
  306. "type": "url",
  307. "label": "Button 2 link"
  308. },
  309. {
  310. "id": "linktext2",
  311. "type": "text",
  312. "label": "Button 2 text",
  313. "default": "Click Here"
  314. }
  315. ]
  316. },
  317. {
  318. "type": "textbtn",
  319. "name": "TextBtn",
  320. "settings" : [
  321. {
  322. "type": "text",
  323. "id": "caption",
  324. "default": "Heading",
  325. "label": "t:sections.footer.blocks.text.settings.heading.label"
  326. }
  327. ]
  328. },
  329.  
  330. {
  331. "type": "image",
  332. "name": "Image",
  333. "settings": [
  334. {
  335. "type": "image_picker",
  336. "id": "image",
  337. "label": "Image"
  338. },
  339. {
  340. "type": "range",
  341. "id": "image_width",
  342. "min": 50,
  343. "max": 200,
  344. "step": 5,
  345. "unit": "px",
  346. "label": "Image width",
  347. "default": 100
  348. },
  349. {
  350. "type": "select",
  351. "id": "alignment",
  352. "label": "Image alignment on large screen",
  353. "options": [
  354. {
  355. "value": "",
  356. "label": "Left"
  357. },
  358. {
  359. "value": "center",
  360. "label": "Center"
  361. },
  362. {
  363. "value": "right",
  364. "label": "Right"
  365. }
  366. ],
  367. "default": "center"
  368. }
  369. ]
  370. }
  371. ],
  372. "settings": [
  373. {
  374. "type": "select",
  375. "id": "color_scheme",
  376. "options": [
  377. {
  378. "value": "accent-1",
  379. "label": "t:sections.footer.settings.color_scheme.options__1.label"
  380. },
  381. {
  382. "value": "accent-2",
  383. "label": "t:sections.footer.settings.color_scheme.options__2.label"
  384. },
  385. {
  386. "value": "background-1",
  387. "label": "t:sections.footer.settings.color_scheme.options__3.label"
  388. },
  389. {
  390. "value": "background-2",
  391. "label": "t:sections.footer.settings.color_scheme.options__4.label"
  392. },
  393. {
  394. "value": "inverse",
  395. "label": "t:sections.footer.settings.color_scheme.options__5.label"
  396. }
  397. ],
  398. "default": "background-1",
  399. "label": "t:sections.footer.settings.color_scheme.label"
  400. },
  401. {
  402. "type": "header",
  403. "content": "t:sections.footer.settings.header__1.content",
  404. "info": "t:sections.footer.settings.header__1.info"
  405. },
  406. {
  407. "type": "checkbox",
  408. "id": "newsletter_enable",
  409. "default": true,
  410. "label": "t:sections.footer.settings.newsletter_enable.label"
  411. },
  412. {
  413. "type": "text",
  414. "id": "newsletter_heading",
  415. "default": "Subscribe to our emails",
  416. "label": "t:sections.footer.settings.newsletter_heading.label"
  417. },
  418. {
  419. "type": "header",
  420. "content": "t:sections.footer.settings.header__2.content",
  421. "info": "t:sections.footer.settings.header__2.info"
  422. },
  423. {
  424. "type": "checkbox",
  425. "id": "show_social",
  426. "default": false,
  427. "label": "t:sections.footer.settings.show_social.label"
  428. },
  429. {
  430. "type": "header",
  431. "content": "t:sections.footer.settings.header__3.content",
  432. "info": "t:sections.footer.settings.header__4.info"
  433. },
  434. {
  435. "type": "checkbox",
  436. "id": "enable_country_selector",
  437. "default": true,
  438. "label": "t:sections.footer.settings.enable_country_selector.label"
  439. },
  440. {
  441. "type": "header",
  442. "content": "t:sections.footer.settings.header__5.content",
  443. "info": "t:sections.footer.settings.header__6.info"
  444. },
  445. {
  446. "type": "checkbox",
  447. "id": "enable_language_selector",
  448. "default": true,
  449. "label": "t:sections.footer.settings.enable_language_selector.label"
  450. },
  451. {
  452. "type": "header",
  453. "content": "t:sections.footer.settings.header__7.content"
  454. },
  455. {
  456. "type": "checkbox",
  457. "id": "payment_enable",
  458. "default": true,
  459. "label": "t:sections.footer.settings.payment_enable.label"
  460. },
  461. {
  462. "type": "header",
  463. "content": "t:sections.all.spacing"
  464. },
  465. {
  466. "type": "range",
  467. "id": "margin_top",
  468. "min": 0,
  469. "max": 100,
  470. "step": 4,
  471. "unit": "px",
  472. "label": "t:sections.footer.settings.margin_top.label",
  473. "default": 0
  474. },
  475. {
  476. "type": "header",
  477. "content": "t:sections.all.padding.section_padding_heading"
  478. },
  479. {
  480. "type": "range",
  481. "id": "padding_top",
  482. "min": 0,
  483. "max": 100,
  484. "step": 4,
  485. "unit": "px",
  486. "label": "t:sections.all.padding.padding_top",
  487. "default": 36
  488. },
  489. {
  490. "type": "range",
  491. "id": "padding_bottom",
  492. "min": 0,
  493. "max": 100,
  494. "step": 4,
  495. "unit": "px",
  496. "label": "t:sections.all.padding.padding_bottom",
  497. "default": 36
  498. }
  499. ],
  500. "presets": [
  501. {
  502. "name": "Main Header",
  503. "category": "ADVANCED LAYOUT"
  504. }
  505. ]
  506. }
  507. {% endschema %}
  508.  
  509. {% javascript %}
  510. {% endjavascript %}
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!