CSS / URGENT HELP NEEDED

Hey Guys,

I am applying this CSS code to my website to make cover photo stretched to the header, however when I am using this code, it applies this to every page and is not compatible on the mobile device. Do you know how to make it compatible with mobile device? Also, on other pages (not homepage) it is overlaying the context, how can I make it compatible to be above context on other pages?

.site-content {
margin-top: -130px !important;
}

.homepage-cover {
padding-top: 130px !important;
}

.homepage-cover {
padding-top: 250px !important;
}

.search-overlay, .primary-header {
background-color: rgba(33,39,43,0.5) !important;
}

.main-navigation, .category-list .category-count {
background-color: transparent !important;
}

Thanks in advance!

Best,
Piotr