Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 11, 2022 at 12:19 am #1340058
    grassifrancesca

    Hi,
    I have opened a thread a couple of weeks ago for the overlapping columns.
    With the same logic, just adjusting the code, I have created overlapping rows and it works perfectly on desktop.
    The problem occurs on the mobile. The website acts responsive but the columns don’t keep the correct order. I have been trying to use the “Column Behaviour When Fullwidth” and give an order but it doesn’t work.

    I think the problem is that the image and the text block are on 2 different rows.
    Any idea on how to fix it? Should I recreate the page put the text block and the image on the same row and adjust the code accordingly?

    Screenshot-2022-02-10-at-22-17-04

    Thanks

    February 11, 2022 at 7:01 pm #1340193
    Nikko

    Hi grassifrancesca,

    I think it can’t be fixed with that structure.
    You should put textblock and the button in the same 1/2 column as the image, then add a background image on that column then just have a negative margin on the image which should have the same result you would have on desktop and still be in correct order on mobile.

    Best regards,
    Nikko

    February 15, 2022 at 11:22 am #1340672
    grassifrancesca

    Hi Nikko,
    Not sure I understand your suggested solution.
    At the moment the text block and the button sit on a coloured background that is bigger than the picture.
    If I put the picture together in the same 1/2 column, the picture will sit on the pink background too.

    February 16, 2022 at 12:48 am #1340811
    Nikko

    Hi grassifrancesca,

    Yes it would put the picture in the pink background as well that’s why the image should have a negative margin so it shifts upward and the top part of the image should partially go outside of the column area with the pink background.

    Best regards,
    Nikko

    February 16, 2022 at 11:13 am #1340891
    grassifrancesca

    Hi Nikko,
    I think I managed to fix it.
    I put everything in the 1/2 column with pink background and added some white background directly to the picture.
    I then swap for a normal picture with no background on the mobile version.
    Thanks for the suggestion.

    February 17, 2022 at 7:10 am #1341068
    Nikko

    Hi grassifrancesca,

    I’m happy to hear that :)
    It’s also a great workaround without the need of using CSS.
    Thanks for sharing the solution that you’ve made and thanks as well for using Enfold :)
    Have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Overlapping rows’ is closed to new replies.