On smart phones

Similar to one of the Enfold demos, I have color sections as the first thing on pages with a background image and a special heading within the color section. Pages are set to transparent and glassy header or transparent header. The problem occurs on my phone or when I size the desktop screen narrow and is two-fold: (1) if I add CSS code provided on the forum to make the header transparent on mobile, then the special heading jumps up into the header area and the color section background image also seems to jump up. (Here is the code from the forum: `
@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency, .av_header_transparency {
background: transparent!important;
position: absolute!important;
}}`

(2) The second problem: Whether or not I use the code to make the header transparent, on my phone, the top of the background image is cropped off (with the image set to center center, parallax, and stretch to fit). This is occurring on my android phone, but not on my desktop, even when I have the browsers (both chrome and firefox) at their most narrow. In other words, on my desktop browsers, as I narrow the browser screen, more and more of the area above and below the center of the image shows. However, the part of the photo that shows when the desktop browser is full-screen doesn’t show on my phone. I can solve this problem on my phone by setting the background attachment (image) to scroll, but then depending on the image, the right part of the image won’t display on my desktop when the browser is at full-screen.