Font / pictures change size when scrolling down on mobile

Site URL: http://chessbuds.com

When I access my site on a mobile device using a link from another website (Instagram, LinkedIn, etc.) and scroll down, the font and images change size.  I'd like them to stay the same size when scrolling and not change around.  I entered this custom CSS and it seems to work when I access the mobile website via an internet browser, but not when I access it through a link.  Any help fixing my site would be greatly appreciated- thank you!

/* header fixed padding */
@media screen and (max-width:767px) {
.header-announcement-bar-wrapper {
    padding: 6vw !important;
}
}

Hi. I am also having the same issue? Were you able to resolve it?