Gallery goes large during responsiveness

We have set a mobile responsive code in our website. And whenever it hits 480 and below the reflex image goes bigger and it cannot be clicked anymore.
The images looks like this.

And here is the media query that we’ve added.

@media only screen
and (min-width : 320px) and (max-width:480px){
.site{
margin: 0 auto;
}
.site-content-homepage{
width: auto;
}
.site-content{
width: auto;
}
.about-mirza{
width: auto;
}
.latest-products{
width: auto;
}
.image_box{
display: flex;
}
body.template-front-page .site-content,
body.attachment .site-content,
body.full-width .site-content {
width: 100%;
}
.site-info{
width: auto;
}
.email_header{
padding-top: 17%;
width: 100%;
text-align: center;
}
#phone p{
width: 100%;
}
.main-navigation ul.nav-menu {
background: none;
}
.main-navigation{
clear: both;
margin: 0px auto;
max-width: 1080px;
min-height: 45px;
position: relative;
text-align: center;
}
.site-header h1 {
font-size: 1.71429rem;
line-height: 1.28571;
margin-bottom: 1rem;
}
.site-header h1, .site-header h2 {
text-align: center;
}
.widget-area{
margin-left: 1em;
}
.wpcf7-form input{
width: 100%;
}

}

Thank You.

https://wordpress.org/plugins/reflex-gallery/