Hello,
How to edit Subheading to disable transparency and make it 100% white as a heading? (Mobile only)
How to edit The shadow around the button; color and transparency to make it as visible as the edited photo below? (Mobile only):
How to make the white area on the third photo 50% transparent (Desktop Only)?
BEFORE:
AFTER:
DESKTOP:
Hello There,
Please share your store URL and password.
So that I will check and let you know the exact solution here.
Hi @Maro33 ,
Please share your store URL and if your store is password protected then please provide password too.
So that we can help you.
Thank you.
Hello @Maro33 !
So I went ahead and wrote a bit off CSS that will have your desired effect:
{% if template.name == "index" %}
{%style%}
/*How to edit Subheading to disable transparency and make it 100% white as a heading? (Mobile only)*/
@media only screen and (max-width: 748px) {
div.banner__text > span{
color: rgba(var(--color-foreground));
}
}
/*How to edit The shadow around the button; color and transparency to make it as visible as the edited photo below? (Mobile only):*/
a.button.button--secondary{
box-shadow: 0px 0px 10px 1px;
}
/*How to make the white area on the third photo 50% transparent (Desktop Only)?*/
@media only screen and (min-width: 749px) {
.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-background-1.slideshow__text--center.slideshow__text-mobile--center {
background: rgba(253,253,251,.5);
}
}
{%endstyle%}
{% endif %}
(Do this on a copy theme!) Go into your store admin, then go to Online Store > Themes > Actions (on your live theme) > Edit Code. Then search and find the file named ‘theme.liquid’. Add that code to either the very top or bottom of that file, then hit save. That should work, let me know if it doesn’t!
Another way to do it would be to use the app Easy Edits: https://apps.shopify.com/easy-edits
You can just click on any element and select the changes to make (it gives you a click and change editor for your store). If you use the app, you can also create edits for mobile, or any screen size like you were looking for. You can always make your edits, and then delete the app and keep the edits, without paying.
(Disclaimer: I’m the founder/developer behind the app)
Hopefully, that helped out, let me know if it did or if I can answer anything else!
My my!!! 100% like what I have asked for. Thank you deeply! @mt686 you made my day!
Hi,
I would like to do the exact same but for the attached picture on sense theme for desktop and mobile to make it more visible.
For desktop I would like the font to be changed to white.
However, I am unsure which colour would make it more readable on mobile as the product in the picture is white. I think for mobile I would need the heading to be a light grey and I am unsure about the subheading, Any suggestions? Thanks!
