Jump to content

Move text lines to top on mobile

Recommended Posts

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 

IMG_9E1EC5E36ABD-1.jpeg

Edited by aguec
Link to comment
  • aguec changed the title to Move text lines to top on mobile
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

3 hours ago, aguec said:

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?
Thanks, Angelika 

IMG_9E1EC5E36ABD-1.jpeg

Try this

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

#block-yui_3_17_2_1_1653921446835_12319 {

top: 0px !important;

}

}
Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.