Portfolio Pages are not being responsive to mobile

Hello,
We’re having issues with our website being responsive to mobile. I’ve combed through all the past posts about this issue and tried the code provided, but nothing is working.

Some pages (ie: the front page) are working fine (grid stacking) . Then other pages (ie: the Guest Alumni) squishes everything together. All the portfolio item pages have the same problem.

We’ve also tried various things using/not using color sections, using the grid row, etc. We can’t seem to figure out why some pages are working and others not.

the code currently in the quick css:

.custom_layer img{
position: absolute;
}
.custom_layer{
position: relative;
}
.custom_layer:hover .first{
z-index: 2;
}

.small-preview .iconfont { display: none; }
.main_color .small-preview { background: transparent; }
.main_color .small-preview:hover { background: transparent; }
.multi-big .post_author_timeline, .single-small .post_author_timeline { display: none; }

@media only screen and (max-width: 767px) {
#desktop-section {
display: none !important;
}}

@media only screen and (min-width: 768px) {
#mobile-section {
display: none !important;
}}
@media only screen and (max-width: 480px) {
.responsive #top #wrap_all .container { width: 80%; max-width: 80%; }}

@media only screen and (max-width: 767px) and (min-width: 989px) {
.av-masonry-col-5 .av-masonry-entry {
width: 33.33%;
}
}

@media only screen and (max-width: 767px) {
.av-masonry-col-5 .av-masonry-entry {
width: 100%;
}
}