change background color of hero section

[technase]

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 

[Asad-Mahmood · 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 %}

[Asad-Mahmood · 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 %}

[technase]

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?

[Asad-Mahmood · 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 %}