Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • December 6, 2020 at 7:08 pm #1265302
    c2strategy

    Hi,
    I have two layout element on the same line (2/5 and 3/5).
    I need to visualise the order 2/5 and 3/5 on deskpot visualization and the revert order 3/5, 2/5 on mobile visualization.
    How can i make it?

    Many thanks for the support.
    Kind Regards,
    C2S

    December 6, 2020 at 9:07 pm #1265345
    Victoria

    Hey c2strategy,

    Could you please attach a mockup of what you’re trying to achieve?

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    December 7, 2020 at 11:13 am #1265439
    c2strategy

    Hi Victoria,
    In the middle of landing page, you find a section with two picture and relative description.
    Each row of that section is made up of two layout element, image for 2/3 layout and description for 1/3
    I would like to have the section “Pattern e indicatori” with reverse order (1/3, 2/3) than now (2/3, 1/3) in order to have the first image on the left and the second image on the right on desktop visualization.
    In need this modification only on desktop view leaving unchangable actual layout on mobile view.

    Hope to be able to clarify my needs.
    Thank you for your help.
    Kind Regards,
    C2S

    December 7, 2020 at 7:49 pm #1265577
    Victoria

    Hi c2strategy,

    You need to put the “Pattern e indicatori” and it’s neighbor to a separate grid row, then we can adjust it via css.

    Best regards,
    Victoria

    December 7, 2020 at 11:05 pm #1265631
    Guenni007

    use flex-model for it.
    Are these layouts grid-row elements or columns?

    if you have grid rows – just give a custom-class to your grid-row element that should break reverse.
    f.e. : reverse-order

    just copy to your quick css:

    @media only screen and (max-width: 989px) {
  .av-layout-grid-container.reverse-order {
    display: flex !important;
    flex-flow: row wrap-reverse;
  }
  .av-layout-grid-container .flex_cell {
    min-height: 350px 
  }
}

    ( if you have the break-point set on grid-row element at 768 just change the media querry value to 767px )

    the last rule is just to not loose the background-images in my example : https://webers-testseite.de/reverse-order/

    December 9, 2020 at 3:25 am #1265903
    Rikard

    Hi,

    Thanks for helping out @guenni007. Did you try that out @c2strategy?

    Best regards,
    Rikard

    December 9, 2020 at 3:13 pm #1266011
    c2strategy

    Hi,
    I have swiched on grid rows and I have tried @guennin007’s suggestion (thank you for your help).
    It works but I have too much space between cells on grid on mobile view.
    For break-point, I have two option (mobile device width 767 px or lower and on tablets width 989 px or lower) but there is no improvement.

    How can I modified custom css to solve it?
    Many thanks and kind regards,
    C2Strategy

    December 12, 2020 at 6:39 pm #1266796
    c2strategy

    I have changed the minimal height and i found what i needed.
    Many thanks @Guenni007

    December 15, 2020 at 9:51 pm #1267555
    Victoria

    Hi c2strategy,

    Glad you got it working for you with Guenni007’s help! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

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