Why isn't text appearing on my mobile banner with the Artisan theme?

Store Design
1

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

2

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!

3

Hi there, thank you but unfortunately that did not work

4

Still that script on your website ?

Then I will check.

5

It is still there, yes

6

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|1253x185](upload://fSMg9g9yDVEeMFpYhlkT3y5We1y.jpeg)

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!

7

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

8

Hey @btr-clothing ,

Just paste html here.

Thanks!

9

{% capture content %}

{{ ‘styles.scss.css’ | asset_url | stylesheet_tag }}

.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;
}

{% if current_tags %}{% assign meta_tags = current_tags | join: ', ’ %}{% endif %}

{% 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 %}

{% if page_description %}

{% endif %}

{% render ‘social-meta-info’ %}
{% if collection.previous_product %}{% endif %}
{% if collection.next_product %}{% endif %}

{% if settings.favicon != nil %}

{% else %} {% endif %}

{% if template contains ‘customer’ %}
{{ “shopify_common.js” | shopify_asset_url | script_tag }}
{{ “customer_area.js” | shopify_asset_url | script_tag }}
{% endif %}
{{ content_for_header }}

{% for locale in shop.enabled_locales %}
{% if locale.primary == true %}
{% assign defaultLocale = locale.iso_code %}
{% endif %}
{% endfor %}

{% section ‘header’ %}

{{ content_for_layout }}

{% section ‘footer’ %}

{% section ‘popup’ %}

{% if settings.disqus_enabled %}
{% if template contains “blog” or template contains “article” or template contains “index” %}

{% endif %}
{% endif %}
{% if settings.shipping_calc and shop.enabled_currencies.size > 1 %}

{% endif %}

{% if settings.shipping_calc and template contains “cart” %}
{% render ‘currencies’ %}
{% render ‘cart-shipping-scripts’ %}
{% endif %}

{% 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% ;
}}

10

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

11

Unfortunately, the code is not here :disappointed_face:

Can you send me a theme zip?

12

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

13

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

14

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!

15

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

16

Hey @btr-clothing ,

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

Thank you!

17

Hey @btr-clothing ,

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

text-background-color.jpg
text-background-color.jpg1221×551 61.5 KB

18

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

19

Hello @btr-clothing

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

Thanks!

20

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