Text slider and button in mobile view

hi i wanna ask how can i put the text slider and the button in the front page slightly below the original position?

here is the link regarding my problem and the solution that i want.

front page

i got some coding for the problem but the problem is the text slider position kinda different for other device like for example android phone and iphone. here is some code that i use

body header#masthead {
    position: absolute !important;
    background: transparent !important;

div.header-image > img.header-inner {
    min-height: 200px;

@media screen and (max-device-width: 767px){
.text-slider {
			margin-top: 50px;

so how can i standardize the text slider position for other device like iphone, tablet and andriod based smartphone?


You can adjust CSS to device widths using media screens, like this for example:

@media only screen and (max-width: 767px)

The above CSS is for smartphones, the above that ( above 768px is for tablets, so above 768 and below 1200px for both portrait and landscape orientations ).

Best Regards,