Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1438043

    Hi,
    how can I get a setup like this:

    On mobile the headline moves to the bottom of the yellow image.
    I posted the link I got the idea from on private content

    Best regards

    • This topic was modified 9 months ago by northorie.
    #1438232

    Hey northorie,

    Thank you for the inquiry.

    You can replicate the layout by adding a Text Block within a Column element, apply the yellow background to the column, then go to Advanced > Developer Settings. In the Custom CSS Class name field, add “av-custom-header-column”. Then add the following code in the Quick CSS field to adjust the position of the text block within the column.

    #top .av-custom-header-column .avia_textblock {
        padding: 40px 20px;
        background: white;
        position: absolute;
        right: -50px;
        top: 50px;
    }

    Best regards,
    Ismael

    #1438273

    Wow, Ismael, thanks a lot!
    I thought it would be much more difficult ;)

    Is there a way to geht the textbox at another place on mobile? At the bottom of the collum?

    #1438290

    Hi,

    You can do that by adding the same CSS inside of a media query:

    @media only screen and (max-width: 767px) {
    #top .av-custom-header-column .avia_textblock {
        padding: 40px 20px;
        background: white;
        position: absolute;
        right: -50px;
        top: 50px;
    }
    }

    Then change the values to fit your needs.

    Best regards,
    Rikard

    #1438351

    thank you very much!
    The left column disappears on mobile.

    I made the background-image and the textblock fixed. Looks great on desktop, but doesn’t work on ipad. Would you kindly check?

    Hoe can I get the columns closer together?

    • This reply was modified 9 months ago by northorie.
    • This reply was modified 9 months ago by northorie.
    #1438405

    Hi,

    Thank you for the update.

    You can adjust the value of top and left property on smaller screens and specify the height of the column. We adjusted the css code a bit:

    @media only screen and (max-width: 989px) {
    
      /* Add your Mobile Styles here */
      #top .av-custom-header-column .flex_cell_inner {
        height: 400px;
      }
    
      #top .av-custom-header-column .avia_textblock {
        right: -50px;
        top: 50px;
      }
    }
    

    Best regards,
    Ismael

    #1438443

    Thank you!
    I needed to make a second row for the mobile view, since I wanted the background image to be fixed. But that didn’t work on mobile.

    Topic can be closed, i’m happy and thankful :)

    #1438445

    Sorry, I just noticed a glitch on ipad view, which is actually the same as desktop. But the background image is at a different position.
    What can I do?
    The position of the picture seems not to be fixed on the tablet, as it is on desktop

    • This reply was modified 9 months ago by northorie.
    #1438780

    Hi,
    I viewed your link emulating the device size 768px, because I don’t have an iPad, but I’m not sure what issue you are seeing, perhaps some screenshots would help showing what you see and what you would like to see.

    Best regards,
    Mike

    #1438783

    Thanks Mike, I decided to use another demo template. Thread can be closed

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Picture with headline’ is closed to new replies.