margin-top problem

So, I use this construction, but it’s not correct at all:

@media only screen and (min-width: 1920px) {
.blue-lives_text {
	width: 65% !important;
	margin-top: -400px !important;
}
}
@media only screen and (min-width: 1800px) and (max-width: 1919px) {
.blue-lives_text {
	width: 65% !important;
	margin-top: -380px !important;
}
}
@media only screen and (min-width: 1700px) and (max-width: 1799px) {
.blue-lives_text {
	width: 65% !important;
	margin-top: -360px !important;
}
}
@media only screen and (min-width: 1600px) and (max-width: 1699px) {
.blue-lives_text {
	width: 65% !important;
	margin-top: -340px !important;
}
}
@media only screen and (min-width: 1500px) and (max-width: 1599px) {
.blue-lives_text {
	width: 65% !important;
	margin-top: -320px !important;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1499px) {
.blue-lives_text {
	width: 65% !important;
	margin-top: -300px !important;
}
}
@media only screen and (min-width: 1300px) and (max-width: 1399px) {
.blue-lives_text {
	width: 65% !important;
	margin-top: -280px !important;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1299px) {
.blue-lives_text {
	width: 65% !important;
	margin-top: -260px !important;
}
}
@media only screen and (min-width: 1100px) and (max-width: 1199px) {
.blue-lives_text {
	width: 65% !important;
	margin-top: -240px !important;
}
}
@media only screen and (min-width: 1000px) and (max-width: 1099px) {
.blue-lives_text {
	width: 65% !important;
	margin-top: -220px !important;
}
}
@media only screen and (min-width: 900px) and (max-width: 999px) {
.blue-lives_text {
	width: 65% !important;
	margin-top: -200px !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 899px) {
.blue-lives_text {
	width: 65% !important;
	margin-top: -180px !important;
}
}
@media only screen and (min-width: 700px) and (max-width: 767px) {
.blue-lives_text {
	width: 100% !important;
	margin-top: -160px !important;
}
}
@media only screen and (min-width: 600px) and (max-width: 699px) {
.blue-lives_text {
	width: 100% !important;
	margin-top: -140px !important;
}
}
@media only screen and (min-width: 500px) and (max-width: 599px) {
.blue-lives_text {
	width: 100% !important;
	margin-top: -120px !important;
}
}
@media only screen and (min-width: 400px) and (max-width: 499px) {
.blue-lives_text {
	width: 100% !important;
	margin-top: -100px !important;
}
}
@media only screen and (min-width: 300px) and (max-width: 399px) {
.blue-lives_text {
	width: 100% !important;
	margin-top: -80px !important;
}
.bottle {
	margin-top: 0 !important;
}

Dear, Nikko.
But I need the image with parallax effect. There is no parallax effect in simple image.

Thank you, Ismael.
Look private content, please.

Column after LayerSlider with text:
Dear fellow…

Margin-top of this column: -400px
But it is so on 1920px of screen width.
When I change screen width to smaller resolution the column with text is going up under Layerslider((
But I need the same visual margin (like in 1920px) in other resolutions.

Hi,
Look at my second post from February 19, 2018 at 4:04 pm

Your answer (February 20, 2018 at 5:37 am):
“That’s a lot of css media queries for a single element.”

This css construction for one element is not correct at all and until now this terrible css construction has not changed.

Dear Ismael,
I already did it. But in this way I have 2 problems:
1. Left-margin of text layer in layerslider is different than column with text without layerslider in different resolutions.
2. Canvas height of layerslider is 1500px, the text layer in layerslider have min. mobile font size 14. The text goes down beyond the layerslider.