Code for adding alternate banner image on mobile

Site URL: http://bercumbuilders.com

I need some code to add an alternate banner image on mobile. I had to use photoshop to put the text on my banner image in order to get the spacing right, but need an alternate one for mobile so that's it's not blown out. Can anyone help me with the code?

Hi @KingdomCreativeCo

I see you have Index Collection as homepage and It has Introduction as the first section. 

Just add another section below Introduction. This would be for mobile add image that you built for mobile version.

And then add this in Custom CSS:

@media(min-width: 768px) {
    .homepage .Index section:nth-child(2) {
        display: none;
    }
}

@media(max-width: 767px) {
    .homepage .Index section:first-child {
        display: none;
    }
}

This css will hide the first section on mobile version and the newly added second section on the desktop version.

Let me know if you have any confusion.