Solved

Text not showing up on mobile banner

btr-clothing
Excursionist
16 0 5

I am using the purchased theme Artisan and the text is not showing up on our main banners on mobile, only desktop.

The site is broughttoreality.com

Can someone help? Thank you so much

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

Hey @btr-clothing 

Please Add code assets/style.scss.liquid bottom of the file.

@media only screen and (max-width: 798px){
.caption__content {position: absolute;top: -173px;}
.slideshow .flickity-viewport {height: 181px;}
}

Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 23 (23)

dmwwebartisan
Shopify Partner
12280 2546 3694

Hey @btr-clothing,

Please add the following code at the end of your assets/style.scss file.

@media only screen and (max-width: 798px){
h1.headline { color: #000000 }   
}

 

Let me know if this works for you.

Thanks! 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
btr-clothing
Excursionist
16 0 5

Hi there, thank you but unfortunately that did not work

dmwwebartisan
Shopify Partner
12280 2546 3694

Still that script on your website ?

Then I will check.

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
btr-clothing
Excursionist
16 0 5

It is still there, yes

dmwwebartisan
Shopify Partner
12280 2546 3694

Hey @btr-clothing,

I can see there is some problem with the theme.

check your layout/theme.liquid file. Try to find out the following. check screenshot. We will have to remove "!important".

important.jpg

 

If you enable to do that, please send me your theme zip. I will find and remove that. Then the above given code will work for mobile.

 

Thanks!

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
btr-clothing
Excursionist
16 0 5

That's not working either, how do I paste to you the html code I am seeing? I'm not seeing an option to export the html code unfortunately. I appreciate your help on this

dmwwebartisan
Shopify Partner
12280 2546 3694

Hey @btr-clothing,

Just paste html here.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
btr-clothing
Excursionist
16 0 5
{% capture content %}
<!DOCTYPE html>
<!--[if IE 9 ]><html class="ie ie9" lang="{{ shop.locale }}"> <![endif]-->
<!--[if (gte IE 10)|!(IE)]><!--><html lang="{{ shop.locale }}"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="cleartype" content="on">
  <meta name="robots" content="index,follow">
 
  <!-- Stylesheets for Artisan 1.3.2 -->
  {{ 'styles.scss.css' | asset_url | stylesheet_tag }}
 
  <noscript>
    <style>
      .slideshow {
        opacity: 1;
      }
 
      .product_gallery {
        opacity: 1;
      }
 
      .mainBar__container.overflow--hidden {
        overflow: visible;
      }
 
      .newsletter-popup.remodal {
        display: none;
      }
 
      .fallbackImage {
        max-width: 100%;
      }
 
      .noscript {
        display: block;
      }
 
      img.lazyload[src*="_100x"],
      img.lazyload[src*="_50x"] {
        display: none;
      }
 
      .product_gallery_nav {
        display: none;
      }
    </style>
  </noscript>
 
  {% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %}{% endif %}
  <title>{% if template contains "index" %}{{ page_title }}{% else %}{{ page_title }}{% if current_tags %} {{ 'general.meta.tagged_html' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} {{ 'general.meta.page' | t: page_number: current_page }}{% endif %}{% unless page_title contains shop.name %} - {{ shop.name }}{% endunless %}{% endif %}</title>
 
  {% if page_description %}
    <meta name="description" content="{{ page_description | escape }}{% if current_tags %} {{ 'general.meta.tagged_html' | t: tags: meta_tags | escape }}.{% endif %}{% if current_page != 1 %} {{ 'general.meta.page' | t: page_number: current_page }}.{% endif %}" />
  {% endif %}
 
  {% render 'social-meta-info' %}
  {% if collection.previous_product %}<link rel="prev" href="{{ collection.previous_product }}">{% endif %}
  {% if collection.next_product %}<link rel="next" href="{{ collection.next_product }}">{% endif %}
 
  <!-- Mobile Specific Metas -->
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="theme-color" content="{{ settings.shop_bg_color }}">
 
  {% if settings.favicon != nil %}
    <link rel="shortcut icon" type="image/x-icon" href="{{ settings.favicon | img_url: '180x180' }}">
    <link rel="apple-touch-icon" href="{{ settings.favicon | img_url: '180x180' }}"/>
    <link rel="apple-touch-icon" sizes="72x72" href="{{ settings.favicon | img_url: '72x72' }}"/>
    <link rel="apple-touch-icon" sizes="114x114" href="{{ settings.favicon | img_url: '114x114' }}"/>
    <link rel="apple-touch-icon" sizes="180x180" href="{{ settings.favicon | img_url: '180x180' }}"/>
    <link rel="apple-touch-icon" sizes="228x228" href="{{ settings.favicon | img_url: '228x228' }}"/>
  {% else %}
    <link rel="shortcut icon" type="image/x-icon" href="{{ 'favicon.png' | asset_url }}">
  {% endif %}
  <link rel="canonical" href="{{ canonical_url }}" />
 
  <script>
    {% render 'js-variables' %}
  </script>
 
  {% if template contains 'customer' %}
    {{ "shopify_common.js" | shopify_asset_url | script_tag }}
    {{ "customer_area.js" | shopify_asset_url | script_tag }}
  {% endif %}
  {{ content_for_header }}
<script id="sg-js-global-vars">
                        sgGlobalVars = {{ shop.metafields['sg-cc']['sg-metafield'] | json }};
                        if(sgGlobalVars) {
                            sgGlobalVars.cart = {{ cart | json }};
                            sgGlobalVars.currentProduct = {{ product | json }};
                            sgGlobalVars.isAdmin = {% if content_for_header contains 'adminBarInjector' or content_for_header contains 'previewBarInjector' %}true{% else %}false{% endif %};
                        }
                    </script></head>
 
{% for locale in shop.enabled_locales %}
  {% if locale.primary == true %}
    {% assign defaultLocale = locale.iso_code %}
  {% endif %}
{% endfor %}
 
<body class="{{ template | replace: '.', '-' | handle }}"
  data-money-format="{% if settings.currency_format == 'money_with_currency_format' %}{{ shop.money_with_currency_format | strip_html }}{% else %}{{ shop.money_format | strip_html }}{% endif %}"
  data-shop-url="{{ shop.url }}"
  data-active-currency="{{ shop.currency }}",
  data-currency-format="{{ settings.currency_format }}",
  data-default-lang="{{ defaultLocale }}"
  data-default-currency="{{ shop.currency }}"
  data-current-currency="{{ cart.currency.iso_code }}"
  data-current-lang="{{ request.locale.iso_code }}">
 
  {% section 'header' %}
 
  <div class="shapesOverflow">
    {{ content_for_layout }}
 
    {% section 'footer' %}
  </div>
 
  {% section 'popup' %}
 
  {% if settings.disqus_enabled %}
    {% if template contains "blog" or template contains "article" or template contains "index" %}
      <script id="dsq-count-scr" src="//{{ settings.disqus_shortname }}.disqus.com/count.js" async></script>
    {% endif %}
  {% endif %}
  {% if settings.shipping_calc and shop.enabled_currencies.size > 1 %}
    <script type="text/javascript" src="/services/javascripts/currencies.js"></script>
    <script defer src="{{ 'currencies.js' | asset_url }}"></script>
  {% endif %}
  <script>
    {% render 'js-variables' %}
  </script>
  <script src="{{ 'app.js' | asset_url }}"></script>
 
  {% if settings.shipping_calc and template contains "cart" %}
    {% render 'currencies' %}
    {% render 'cart-shipping-scripts' %}
  {% endif %}
</body>
</html>
{% endcapture %}
{% assign content = content | replace_first: '<!DOCTYPE', '!DOCTYPE' | split: ' <' %}
{% for html in content %}{% assign htmlblock = html | strip | prepend: ' <' %}{{htmlblock | replace: ' </', '</'}}{% endfor %}
 
@media screen and (max-width: 767px) { .index-section.slideshow-container {
position: relative;
}
.slideshow__mobile-text-container {
position: absolute;
top: 32%;
z-index: 999;
left: 0;
right: 0;
background: #000;
opacity: .6;
}
.slideshow__mobile-text-container h2 {
color: #000000;
width: 100% ;
}}
btr-clothing
Excursionist
16 0 5

That is the code for the page Layout / theme.liquid

dmwwebartisan
Shopify Partner
12280 2546 3694

Unfortunately, the code is not here 😞

Can you send me a theme zip?

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
btr-clothing
Excursionist
16 0 5

I will be able to get it tomorrow and follow up then

dmwwebartisan
Shopify Partner
12280 2546 3694

Sure no problem. Meanwhile, If I get any solution then I post here. Don't worry

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12280 2546 3694

Hey @btr-clothing,

 

I have an idea if we can't change the text color. We can change the background of the text. So for now it will be visible on mobile devices.

Please replace my given code with the following

 

@media only screen and (max-width: 798px){
h1.headline { background-color: #000000 }   
}

 

 

This should work for you.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
btr-clothing
Excursionist
16 0 5

Hi there, mobile version still appears the same when I add that code

dmwwebartisan
Shopify Partner
12280 2546 3694

Hey @btr-clothing,

Did you put that code? if you do then I can check the site.

Thank you!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12280 2546 3694

Hey @btr-clothing,

When you put a given code then you will see the following output.

text-background-color.jpg

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
btr-clothing
Excursionist
16 0 5

I put the code in theme.liquid and it made no change, I put it in slideshow.liquid and the code appeared on the homepage. It is now only in theme.liquid.


Is it not possible to have the text on the image on the mobile version? That is what we would really prefer. Thank you

dmwwebartisan
Shopify Partner
12280 2546 3694

Hello @btr-clothing 

Please Add code assets/theme.scss.liquid bottom of the file.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12280 2546 3694

I have checked your webshop. you added to the code wrong location.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
btr-clothing
Excursionist
16 0 5

The tagline is still missing when I add that code but the black box is now there. Is it not possible to have the text on the image OR if we can change the color of the heading and tagline to be black on mobile, if it is required to sit below the image? I think we would prefer the latter. Thank you again

btr-clothing_0-1597332071970.png

 

dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

Hey @btr-clothing 

Please Add code assets/style.scss.liquid bottom of the file.

@media only screen and (max-width: 798px){
.caption__content {position: absolute;top: -173px;}
.slideshow .flickity-viewport {height: 181px;}
}

Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
btr-clothing
Excursionist
16 0 5

Thank you so much! I adjusted the pixels to get it centered on the image and it looks great. 

tirn
Excursionist
17 0 3

Hello @dmwwebartisan ,

 

I have similar problem. Could you please assist. I’m about to launch my store and really need this working. This my store Url: eboardnation.com

 

Banner text only appears on desktop and not on mobile