Removing Animated Background on Mobile

Site URL: https://www.kenyattathomas.com/

Hi everyone. 

On my website, I have animated backgrounds in header sections on my website with blocks underneath the text so that the text is more visible above the animation. However, on mobile, the text no longer lines up with the boxes and looks quite wonky, so I'm looking to remove the animated background so that the background is just the plain red of the rest of the website, but on mobile only. Is there any way to code this? 

Thanks so much!

2 hours ago, bkenyatta said:

Site URL: https://www.kenyattathomas.com/

Hi everyone. 

On my website, I have animated backgrounds in header sections on my website with blocks underneath the text so that the text is more visible above the animation. However, on mobile, the text no longer lines up with the boxes and looks quite wonky, so I'm looking to remove the animated background so that the background is just the plain red of the rest of the website, but on mobile only. Is there any way to code this? 

Thanks so much!

You should try the following modification in Design > Custom Css

Hope it is helpful for you

@media only screen and (max-width: 767px) {
  section:first-child .section-background {
    display:none;
  }
}