Move text lines to top on mobile

Site URL: https://www.immo-dream.com

Hi, 
I have a problem with the position of H1 and subline on mobile devices. The cookie banner hides the text on the banner, which is no banner but a Overlap element. How can I adjust the text to move it to the top of the image?

I built the site with 7.1. For the header I use a section with overlap. I put the large image in the background and set the image on the overlap transparent. So the text is standing on the background image.

I want to move the text more to the top in the mobile view, but leave it at the bottom in the desktop version.

 
Thanks, Angelika 

Thanks for the solution. But this is only moving the blue subline to the top. Can I copy the CSS and paste the block-yui for the golden stripes as well? I could not find out which yui ID they have. 

20 hours ago, aguec said:

Thanks for the solution. But this is only moving the blue subline to the top. Can I copy the CSS and paste the block-yui for the golden stripes as well? I could not find out which yui ID they have. 

Try this CSS

@media screen and (max-width:767px) {
div#page-section-6294d1ee12e2ea5c0bbc21c8 .image-card-wrapper, #block-yui_3_17_2_1_1653921446835_12319 {
    position: relative;
    top: -250px !important;
}
}

7 hours ago, tuanphan said:

Try this CSS

@media screen and (max-width:767px) {
div#page-section-6294d1ee12e2ea5c0bbc21c8 .image-card-wrapper, #block-yui_3_17_2_1_1653921446835_12319 {
    position: relative;
    top: -250px !important;
}
}

 

Perfect! This is exactly the solution I needed. Thanks so much. 
Regards from Munich, Angelika