Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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!
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!
Hi there, thank you but unfortunately that did not work
Still that script on your website ?
Then I will check.
It is still there, yes
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".
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!
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
Hey @btr-clothing,
Just paste html here.
Thanks!
That is the code for the page Layout / theme.liquid
Unfortunately, the code is not here 😞
Can you send me a theme zip?
I will be able to get it tomorrow and follow up then
Sure no problem. Meanwhile, If I get any solution then I post here. Don't worry
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!
Hi there, mobile version still appears the same when I add that code
Hey @btr-clothing,
Did you put that code? if you do then I can check the site.
Thank you!
Hey @btr-clothing,
When you put a given code then you will see the following output.
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
Hello @btr-clothing
Please Add code assets/theme.scss.liquid bottom of the file.
Thanks!
I have checked your webshop. you added to the code wrong location.
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
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!
Thank you so much! I adjusted the pixels to get it centered on the image and it looks great.
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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024