Re: change background color of hero section

Solved

change background color of hero section

technase
Shopify Partner
165 1 39

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 

nutravalid_with_sys.png

 

 

technase
Accepted Solutions (2)

Asad-Mahmood
Trailblazer
156 33 38

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

 

AsadMahmood_0-1722798667291.png

 

 

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: [email protected]
WhatsApp





View solution in original post

Asad-Mahmood
Trailblazer
156 33 38

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 %}
If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: [email protected]
WhatsApp





View solution in original post

Replies 3 (3)

Asad-Mahmood
Trailblazer
156 33 38

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

 

AsadMahmood_0-1722798667291.png

 

 

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: [email protected]
WhatsApp





technase
Shopify Partner
165 1 39

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?

technase
Asad-Mahmood
Trailblazer
156 33 38

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 %}
If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: [email protected]
WhatsApp