Make section background photo disappear on mobile / smaller screens

Support
#1

Hi there, I’m working on this site - home page section #4: http://cap.temp-website.us/ I’d like to make the background photo in section 4 disappear completely on smaller screens instead of wrapping to under the “Food Packaging & Processing” column. Can you look at my CSS and tell me what I should use instead of what’s here? I was using CSS to force the break at 980, but now I want to also just make that photo disappear. Thanks! (using latest version of everything with X Pro, child theme).

/* top image wrap & cut off */
@media (max-width: 980px) {
#x-section-1  .x-container.marginless-columns .x-column {
    display: block;
    width: 100%;
    clear:both;
    float:none;
}
}

/* section 4 custom wrap & custom image */
@media (max-width: 980px) {
#x-section-4  .x-container.marginless-columns .x-column {
    display: block;
    width: 100%;
    clear:both;
    float:none;
}
}

@media(max-width: 980px){
  #x-section-4 {
  background-image: url(http://cap.temp-website.us/wp-content/uploads/2017/07/food-packaging-and-processing.jpg) !important;
}
}

/* wrap 4 columns to 2 columns */
@media(max-width: 979px) and (min-width: 480px){
    #x-section-2 .x-column.x-1-4 {
        width: 48%;
        float: left;
        margin-right: 4%;
}

  #x-section-2 .x-column.x-1-4:nth-child(2n) {
        margin-right: 0;
}
}
#2

Hi there,

Thanks for posting in.

You have to add background-image: none !important; for the section which, and place it under your preferred @media block.

Thanks.