Shopify themes, liquid, logos, and UX
Hi,
Can someone help me change the background color of my hero section to #eaeaea for mobile view only?
I don't want to change the aspect ratio to fill the white space. Additionally, changing the background color in the theme editor changes the bg-color on all pages, which I don't want either.
I need only this specific section to have this particular background color.
store link: https://www.nutravalid.com/
any help is greatly appreciated
Solved! Go to the solution
This is an accepted solution.
Go to your online store -> edit code -> theme.liquid file and paste this code in the end of file
{% if template == 'index' %}
<style>
@media only screen and (max-width: 768px) {
body {
background-color: #eaeaea !important;
}
}
</style>
{% endif %}
This is an accepted solution.
Replace the code with this
{% if template == 'index' %}
<style>
@media only screen and (max-width: 768px) {
body {
background-color: #eaeaea !important;
}
}
@media only screen and (min-width: 1024px) {
.m-button.m-button--link.m-button--large {
top: 65px !important;
}
}
</style>
{% endif %}
This is an accepted solution.
Go to your online store -> edit code -> theme.liquid file and paste this code in the end of file
{% if template == 'index' %}
<style>
@media only screen and (max-width: 768px) {
body {
background-color: #eaeaea !important;
}
}
</style>
{% endif %}
Amazing - Thank you so much..
Could you also look into the "Shop" button on desktop? If possible, could you help me move it slightly lower?
This is an accepted solution.
Replace the code with this
{% if template == 'index' %}
<style>
@media only screen and (max-width: 768px) {
body {
background-color: #eaeaea !important;
}
}
@media only screen and (min-width: 1024px) {
.m-button.m-button--link.m-button--large {
top: 65px !important;
}
}
</style>
{% endif %}
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025