Enfold full-width header problem

Hi,

I have some questions about http://logos2love.com/applied-piezo/. My client would like a full width header/logo (in the future it will be an animated gif). I managed to do that with quick CSS code I found on this forum (see below this post). The problem is that is won’t scale for smaller screens. The header will always stay 1130px width. For mobile the client would like to use another logo because the full-width header is unreadable for mobile (http://logos2love.com/applied-piezo/wp-content/uploads/2017/04/applied-piezo.jpg). How can I manage this?

Thank you in advance!

Regards,

Pieterjan

.container.av-logo-container {
padding: 0!important;
}
.logo img {
width: 100%;
}

.logo, .logo a {
overflow: hidden;
position: relative;
display: block;
height: 100%;
width: 1130px;
}