Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 8, 2018 at 5:21 pm #1019053
    june

    Hi
    I have set one of the images on my one pager as a background image (see attachment 1) and would like to place it on the page but reach over the row into the next one (see attachment 2).
    I tried to replicate it by looking at your DJ sample content, where you’ve place the album packshot over two rows, but I can’t get it to work.
    Have you got any suggestions?
    Thank you
    June

    October 8, 2018 at 6:21 pm #1019081
    Jordan Shannon

    Hey june,

    This is done with a bit of image manipulation. Basically making the image appear as if it crossing into the next section, but it is all one image.

    Best regards,
    Jordan Shannon

    October 8, 2018 at 7:45 pm #1019167
    june

    Hi Jordan

    Thanks for your response.
    I think it’s done with a minus padding. I checked it on the DJ layout, but I can’t get it to work in my version.

    June

    October 10, 2018 at 5:44 am #1019768
    Ismael

    Hi,

    You need to add the device image as a separate image or put it in a text block. Add a custom css class attribute to that element and set its position to absolute. You can then adjust its position anywhere inside the section.

    Best regards,
    Ismael

    October 10, 2018 at 2:51 pm #1019964
    june

    Hi Ismael

    I tried what you said, but I think I’m targeting the element incorrectly. Could you have a look? I duplicated the “About” section and set it to invisible on all devices for now and added the custom css class ‘ipad’. I removed my quick CSS.

    I would like the image to be right aligned with no margin nor padding (as part of the image is cut) and then float between About and Services over the diagonal border.

    I added access in the private section. Hopefully you can resolve this.
    Thanks a lot, June

    October 11, 2018 at 4:35 am #1020140
    Ismael

    Hi,

    Thanks for the update.

    I added a custom css class attribute to the column containing the iPad image and then use this css code to adjust its position.

    .ipad-image {
    position: absolute;
    top: 100px;
    float: none;
    right: -50px;
}

    Best regards,
    Ismael

    October 11, 2018 at 4:09 pm #1020344
    june

    Amazing, that is exactly what I was after. I had trouble figuring out how to name the class…
    Thanks for your help.

    October 11, 2018 at 4:11 pm #1020348
    Jordan Shannon

    Hi,

    I’m glad you got this resolved. If you need additional help. Please let us know here in the forums.

    Best regards,
    Jordan Shannon

    October 11, 2018 at 4:11 pm #1020350
    Jordan Shannon

    Hi,

    I’m glad you got this resolved. If you need additional help. Please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.