Hi, I am using the Dawn theme and have been trying to figure out how I have a different image for web and mobile. I have wasted a lot of time so posting on here in the hope someone can help me fix.
There are so many questions on this but if you are not a technical person, it is impossible to get your website optimized for mobile. I have done a bit of CSS and html in the past but cannot solve so not sure what to do now.
Is there anyone who can help me figure out what I need to update to get my banner appearing. I think I may have added some code in somewhere so there is no banner appearing on mobile at all.
Let me know if you need more info.
Here is the code (section.image.banner):
.banner {
display: flex;
position: relative;
flex-direction: column;
}
.banner__box {
text-align: center;
}
/* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
.banner__box.gradient {
transform: perspective(0);
}
@media only screen and (max-width: 749px) {
.banner–content-align-mobile-right .banner__box {
text-align: right;
}
.banner–content-align-mobile-left .banner__box {
text-align: left;
}
}
@media only screen and (min-width: 750px) {
.banner–content-align-right .banner__box {
text-align: right;
}
.banner–content-align-left .banner__box {
text-align: left;
}
.banner–content-align-left.banner–desktop-transparent .banner__box,
.banner–content-align-right.banner–desktop-transparent .banner__box,
.banner–medium.banner–desktop-transparent .banner__box {
max-width: 68rem;
}
.banner–small.banner–mobile-bottom:not(.banner–adapt) .banner__media,
.banner–small.banner–stacked:not(.banner–mobile-bottom):not(.banner–adapt) > .banner__media {
height: 60rem;
}
.banner__media.animate–zoom-in {
clip-path: inset(0px);
}
.banner__media.animate–zoom-in > img:not(.zoom):not(.deferred-media__poster-button),
.banner__media.animate–zoom-in > svg:not(.zoom):not(.deferred-media__poster-button) {
position: fixed;
height: 100vh;
}
@media screen and (max-width: 749px) {
.banner–small.banner–mobile-bottom:not(.banner–adapt) .banner__media,
.banner–small.banner–stacked:not(.banner–mobile-bottom):not(.banner–adapt) > .banner__media {
height: 28rem;
}
.banner–medium.banner–mobile-bottom:not(.banner–adapt) .banner__media,
.banner–medium.banner–stacked:not(.banner–mobile-bottom):not(.banner–adapt) > .banner__media {
height: 34rem;
}
.banner–large.banner–mobile-bottom:not(.banner–adapt) .banner__media,
.banner–large.banner–stacked:not(.banner–mobile-bottom):not(.banner–adapt) > .banner__media {
height: 39rem;
}
.banner–small:not(.banner–mobile-bottom):not(.banner–adapt) .banner__content {
min-height: 28rem;
}
.banner–medium:not(.banner–mobile-bottom):not(.banner–adapt) .banner__content {
min-height: 34rem;
}
.banner–large:not(.banner–mobile-bottom):not(.banner–adapt) .banner__content {
min-height: 39rem;
}
}
@media screen and (min-width: 750px) {
.banner {
flex-direction: row;
}
.banner–small:not(.banner–adapt) {
min-height: 42rem;
}
.banner–medium:not(.banner–adapt) {
min-height: 56rem;
}
.banner–large:not(.banner–adapt) {
min-height: 72rem;
}
.banner__content.banner__content–top-left {
align-items: flex-start;
justify-content: flex-start;
}
.banner__content.banner__content–top-center {
align-items: flex-start;
justify-content: center;
}
.banner__content.banner__content–top-right {
align-items: flex-start;
justify-content: flex-end;
}
.banner__content.banner__content–middle-left {
align-items: center;
justify-content: flex-start;
}
.banner__content.banner__content–middle-center {
align-items: center;
justify-content: center;
}
.banner__content.banner__content–middle-right {
align-items: center;
justify-content: flex-end;
}
.banner__content.banner__content–bottom-left {
align-items: flex-end;
justify-content: flex-start;
}
.banner__content.banner__content–bottom-center {
align-items: flex-end;
justify-content: center;
}
.banner__content.banner__content–bottom-right {
align-items: flex-end;
justify-content: flex-end;
}
}
@media screen and (max-width: 749px) {
.banner:not(.banner–stacked) {
flex-direction: row;
flex-wrap: wrap;
}
.banner–stacked {
height: auto;
}
.banner–stacked .banner__media {
flex-direction: column;
}
}
.banner__media {
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.banner__media-half {
width: 50%;
}
.banner__media-half + .banner__media-half {
right: 0;
left: auto;
}
.banner__media-half.animate–fixed:first-child > img,
.banner__media-half.animate–zoom-in:first-child > img {
width: 50%;
}
.banner__media-half.animate–fixed:nth-child(2) > img,
.banner__media-half.animate–zoom-in:nth-child(2) > img {
left: 50%;
width: 50%;
}
@media screen and (max-width: 749px) {
.banner–stacked .animate–fixed:first-child > img,
.banner–stacked .animate–zoom-in:first-child > img {
width: 100%;
}
.banner–stacked .banner__media-half.animate–fixed:nth-child(2) > img,
.banner–stacked .banner__media-half.animate–zoom-in:nth-child(2) > img {
left: 0;
width: 100%;
}
.banner–stacked .banner__media-half {
width: 100%;
}
.banner–stacked .banner__media-half + .banner__media-half {
order: 1;
}
}
@media screen and (min-width: 750px) {
.banner__media {
height: 100%;
}
}
.banner–adapt,
.banner–adapt_image.banner–mobile-bottom .banner__media:not(.placeholder) {
height: auto;
}
@media screen and (max-width: 749px) {
.banner–mobile-bottom .banner__media,
.banner–stacked:not(.banner–mobile-bottom) .banner__media {
position: relative;
}
.banner–stacked.banner–adapt .banner__content {
height: auto;
}
.banner:not(.banner–mobile-bottom):not(.email-signup-banner) .banner__box {
background: transparent;
}
.banner:not(.banner–mobile-bottom) .banner__box {
border: none;
border-radius: 0;
box-shadow: none;
}
.banner:not(.banner–mobile-bottom) .button–secondary {
–alpha-button-background: 0;
}
.banner–stacked:not(.banner–mobile-bottom):not(.banner–adapt) .banner__content {
position: absolute;
height: auto;
}
.banner–stacked.banner–adapt:not(.banner–mobile-bottom) .banner__content {
max-height: 100%;
overflow: hidden;
position: absolute;
}
.banner–stacked:not(.banner–adapt) .banner__media {
position: relative;
}
.banner::before {
display: none !important;
}
.banner–stacked .banner__media-image-half {
width: 100%;
}
}
.banner__content {
padding: 0;
display: flex;
position: relative;
width: 100%;
align-items: center;
justify-content: center;
z-index: 2;
}
@media screen and (min-width: 750px) {
.banner__content {
padding: 5rem;
}
.banner__content–top-left {
align-items: flex-start;
justify-content: flex-start;
}
.banner__content–top-center {
align-items: flex-start;
justify-content: center;
}
.banner__content–top-right {
align-items: flex-start;
justify-content: flex-end;
}
.banner__content–middle-left {
align-items: center;
justify-content: flex-start;
}
.banner__content–middle-center {
align-items: center;
justify-content: center;
}
.banner__content–middle-right {
align-items: center;
justify-content: flex-end;
}
.banner__content–bottom-left {
align-items: flex-end;
justify-content: flex-start;
}
.banner__content–bottom-center {
align-items: flex-end;
justify-content: center;
}
.banner__content–bottom-right {
align-items: flex-end;
justify-content: flex-end;
}
}
@media screen and (max-width: 749px) {
.banner–mobile-bottom:not(.banner–stacked) .banner__content {
order: 2;
}
.banner:not(.banner–mobile-bottom) .field__input,
.banner–mobile-bottom:not(.banner–stacked) .banner__box.color-background-1 {
background: transparent;
}
}
.banner__box {
padding: 4rem 3.5rem;
position: relative;
height: fit-content;
align-items: center;
text-align: center;
width: 100%;
word-wrap: break-word;
z-index: 1;
}
@media screen and (min-width: 750px) {
.banner–desktop-transparent .banner__box {
background: transparent;
max-width: 89rem;
border: none;
border-radius: 0;
box-shadow: none;
}
.banner–desktop-transparent .button–secondary {
–alpha-button-background: 0;
}
.banner–desktop-transparent .content-container:after {
display: none;
}
}
@media screen and (max-width: 749px) {
.banner–mobile-bottom::after,
.banner–mobile-bottom .banner__media::after {
display: none;
}
}
.banner::after,
.banner__media::after {
content: ‘’;
position: absolute;
top: 0;
background: #000000;
opacity: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.banner__box > * + .banner__text {
margin-top: 1.5rem;
}
@media screen and (min-width: 750px) {
.banner__box > * + .banner__text {
margin-top: 2rem;
}
}
.banner__box > * + * {
margin-top: 1rem;
}
.banner__box > *:first-child {
margin-top: 0;
}
@media screen and (max-width: 749px) {
.banner–stacked .banner__box {
width: 100%;
}
}
@media screen and (min-width: 750px) {
.banner__box {
width: auto;
max-width: 71rem;
min-width: 45rem;
}
}
@media screen and (min-width: 1400px) {
.banner__box {
max-width: 90rem;
}
}
.banner__heading {
margin-bottom: 0;
}
.banner__box .banner__heading + * {
margin-top: 1rem;
}
.banner__buttons {
display: inline-flex;
flex-wrap: wrap;
gap: 1rem;
max-width: 45rem;
word-break: break-word;
}
@media screen and (max-width: 749px) {
.banner–content-align-mobile-right .banner__buttons–multiple {
justify-content: flex-end;
}
.banner–content-align-mobile-center .banner__buttons–multiple > * {
flex-grow: 1;
min-width: 22rem;
}
}
@media screen and (min-width: 750px) {
.banner–content-align-center .banner__buttons–multiple > * {
flex-grow: 1;
min-width: 22rem;
}
.banner–content-align-right .banner__buttons–multiple {
justify-content: flex-end;
}
}
.banner__box > * + .banner__buttons {
margin-top: 2rem;
}
@media screen and (max-width: 749px) {
.banner:not(.slideshow) .rte a,
.banner:not(.slideshow) .inline-richtext a:hover,
.banner:not(.slideshow) .rte a:hover {
color: currentColor;
}
}
@media screen and (min-width: 750px) {
.banner–desktop-transparent .rte a,
.banner–desktop-transparent .inline-richtext a:hover,
.banner–desktop-transparent .rte a:hover {
color: currentColor;
}
}
Here is the code for theme.liquid:
{%- if settings.favicon != blank -%}
{%- endif -%}{%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}
{%- endunless -%} {{ page_title }} {%- if current_tags %} – tagged "{{ current_tags | join: ', ' }}"{% endif -%} {%- if current_page != 1 %} – Page {{ current_page }}{% endif -%} {%- unless page_title contains shop.name %} – {{ shop.name }}{% endunless -%}{% if page_description %}
{% endif %}
{% render ‘meta-tags’ %}
{%- if settings.animations_reveal_on_scroll -%}
{%- endif -%}
{{ content_for_header }}
{%- liquid
assign body_font_bold = settings.type_body_font | font_modify: ‘weight’, ‘bold’
assign body_font_italic = settings.type_body_font | font_modify: ‘style’, ‘italic’
assign body_font_bold_italic = body_font_bold | font_modify: ‘style’, ‘italic’
%}
{% style %}
{{ settings.type_body_font | font_face: font_display: ‘swap’ }}
{{ body_font_bold | font_face: font_display: ‘swap’ }}
{{ body_font_italic | font_face: font_display: ‘swap’ }}
{{ body_font_bold_italic | font_face: font_display: ‘swap’ }}
{{ settings.type_header_font | font_face: font_display: ‘swap’ }}
{% for scheme in settings.color_schemes -%}
{% assign scheme_classes = scheme_classes | append: ‘, .color-’ | append: scheme.id %}
{% if forloop.index == 1 -%}
:root,
{%- endif %}
.color-{{ scheme.id }} {
–color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
{% if scheme.settings.background_gradient != empty %}
–gradient-background: {{ scheme.settings.background_gradient }};
{% else %}
–gradient-background: {{ scheme.settings.background }};
{% endif %}
{% liquid
assign background_color = scheme.settings.background
assign background_color_brightness = background_color | color_brightness
if background_color_brightness <= 26
assign background_color_contrast = background_color | color_lighten: 50
elsif background_color_brightness <= 65
assign background_color_contrast = background_color | color_lighten: 5
else
assign background_color_contrast = background_color | color_darken: 25
endif
%}
–color-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
–color-background-contrast: {{ background_color_contrast.red }},{{ background_color_contrast.green }},{{ background_color_contrast.blue }};
–color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }};
–color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }};
–color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }};
–color-secondary-button: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
–color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
–color-link: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
–color-badge-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
–color-badge-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
–color-badge-border: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
–payment-terms-background-color: rgb({{ scheme.settings.background.rgb }});
}
{% endfor %}
{{ scheme_classes | prepend: ‘body’ }} {
color: rgba(var(–color-foreground), 0.75);
background-color: rgb(var(–color-background));
}
:root {
–font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
–font-body-style: {{ settings.type_body_font.style }};
–font-body-weight: {{ settings.type_body_font.weight }};
–font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }};
–font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
–font-heading-style: {{ settings.type_header_font.style }};
–font-heading-weight: {{ settings.type_header_font.weight }};
–font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
–font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};
–media-padding: {{ settings.media_padding }}px;
–media-border-opacity: {{ settings.media_border_opacity | divided_by: 100.0 }};
–media-border-width: {{ settings.media_border_thickness }}px;
–media-radius: {{ settings.media_radius }}px;
–media-shadow-opacity: {{ settings.media_shadow_opacity | divided_by: 100.0 }};
–media-shadow-horizontal-offset: {{ settings.media_shadow_horizontal_offset }}px;
–media-shadow-vertical-offset: {{ settings.media_shadow_vertical_offset }}px;
–media-shadow-blur-radius: {{ settings.media_shadow_blur }}px;
–media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %};
–page-width: {{ settings.page_width | divided_by: 10 }}rem;
–page-width-margin: {% if settings.page_width == ‘1600’ %}2{% else %}0{% endif %}rem;
–product-card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem;
–product-card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem;
–product-card-text-alignment: {{ settings.card_text_alignment }};
–product-card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem;
–product-card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }};
–product-card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }};
–product-card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %};
–product-card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
–product-card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem;
–product-card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem;
–collection-card-image-padding: {{ settings.collection_card_image_padding | divided_by: 10.0 }}rem;
–collection-card-corner-radius: {{ settings.collection_card_corner_radius | divided_by: 10.0 }}rem;
–collection-card-text-alignment: {{ settings.collection_card_text_alignment }};
–collection-card-border-width: {{ settings.collection_card_border_thickness | divided_by: 10.0 }}rem;
–collection-card-border-opacity: {{ settings.collection_card_border_opacity | divided_by: 100.0 }};
–collection-card-shadow-opacity: {{ settings.collection_card_shadow_opacity | divided_by: 100.0 }};
–collection-card-shadow-visible: {% if settings.collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
–collection-card-shadow-horizontal-offset: {{ settings.collection_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
–collection-card-shadow-vertical-offset: {{ settings.collection_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
–collection-card-shadow-blur-radius: {{ settings.collection_card_shadow_blur | divided_by: 10.0 }}rem;
–blog-card-image-padding: {{ settings.blog_card_image_padding | divided_by: 10.0 }}rem;
–blog-card-corner-radius: {{ settings.blog_card_corner_radius | divided_by: 10.0 }}rem;
–blog-card-text-alignment: {{ settings.blog_card_text_alignment }};
–blog-card-border-width: {{ settings.blog_card_border_thickness | divided_by: 10.0 }}rem;
–blog-card-border-opacity: {{ settings.blog_card_border_opacity | divided_by: 100.0 }};
–blog-card-shadow-opacity: {{ settings.blog_card_shadow_opacity | divided_by: 100.0 }};
–blog-card-shadow-visible: {% if settings.blog_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
–blog-card-shadow-horizontal-offset: {{ settings.blog_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
–blog-card-shadow-vertical-offset: {{ settings.blog_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
–blog-card-shadow-blur-radius: {{ settings.blog_card_shadow_blur | divided_by: 10.0 }}rem;
–badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;
–popup-border-width: {{ settings.popup_border_thickness }}px;
–popup-border-opacity: {{ settings.popup_border_opacity | divided_by: 100.0 }};
–popup-corner-radius: {{ settings.popup_corner_radius }}px;
–popup-shadow-opacity: {{ settings.popup_shadow_opacity | divided_by: 100.0 }};
–popup-shadow-horizontal-offset: {{ settings.popup_shadow_horizontal_offset }}px;
–popup-shadow-vertical-offset: {{ settings.popup_shadow_vertical_offset }}px;
–popup-shadow-blur-radius: {{ settings.popup_shadow_blur }}px;
–drawer-border-width: {{ settings.drawer_border_thickness }}px;
–drawer-border-opacity: {{ settings.drawer_border_opacity | divided_by: 100.0 }};
–drawer-shadow-opacity: {{ settings.drawer_shadow_opacity | divided_by: 100.0 }};
–drawer-shadow-horizontal-offset: {{ settings.drawer_shadow_horizontal_offset }}px;
–drawer-shadow-vertical-offset: {{ settings.drawer_shadow_vertical_offset }}px;
–drawer-shadow-blur-radius: {{ settings.drawer_shadow_blur }}px;
–spacing-sections-desktop: {{ settings.spacing_sections }}px;
–spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}{% endif %}px;
–grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px;
–grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;
–grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;
–grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;
–text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};
–text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px;
–text-boxes-radius: {{ settings.text_boxes_radius }}px;
–text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }};
–text-boxes-shadow-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %};
–text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px;
–text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px;
–text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px;
–buttons-radius: {{ settings.buttons_radius }}px;
–buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }}{% else %}0{% endif %}px;
–buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px;
–buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }};
–buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }};
–buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %};
–buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px;
–buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px;
–buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;
–buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;
–inputs-radius: {{ settings.inputs_radius }}px;
–inputs-border-width: {{ settings.inputs_border_thickness }}px;
–inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }};
–inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }};
–inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px;
–inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }}{% else %}0{% endif %}px;
–inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px;
–inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px;
–inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }}{% else %}0{% endif %}px;
–variant-pills-radius: {{ settings.variant_pills_radius }}px;
–variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px;
–variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }};
–variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }};
–variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px;
–variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px;
–variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: calc(var(–font-body-scale) * 62.5%);
height: 100%;
}
body {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
margin: 0;
font-size: 1.5rem;
letter-spacing: 0.06rem;
line-height: calc(1 + 0.8 / var(–font-body-scale));
font-family: var(–font-body-family);
font-style: var(–font-body-style);
font-weight: var(–font-body-weight);
}
@media screen and (min-width: 750px) {
body {
font-size: 1.6rem;
}
}
{% endstyle %}
{{ ‘base.css’ | asset_url | stylesheet_tag }}
{%- unless settings.type_body_font.system? -%}
{%- endunless -%} {%- unless settings.type_header_font.system? -%} {%- endunless -%}{%- if localization.available_countries.size > 1 or localization.available_languages.size > 1 -%}
{{ ‘component-localization-form.css’ | asset_url | stylesheet_tag: preload: true }}
{%- endif -%}
{%- if settings.predictive_search_enabled -%}
{%- endif -%} {{ 'accessibility.skip_to_text' | t }}{%- if settings.cart_type == ‘drawer’ -%}
{%- render ‘cart-drawer’ -%}
{%- endif -%}
{% sections ‘header-group’ %}
{{ content_for_layout }}{% sections ‘footer-group’ %}
- {{ 'accessibility.refresh_page' | t }}
- {{ 'accessibility.link_messages.new_window' | t }}
{%- if settings.predictive_search_enabled -%}
{%- endif -%}
Many thanks
Rebecca