Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 19, 2021 at 3:39 pm #1325583
    navindesigns

    On one breakpoint, the columns are not aligning properly

    screenshot – https://ibb.co/VjZd0SV

    live site – https://shawnstoppable.com/contact/

    October 20, 2021 at 3:15 am #1325638
    Nikko

    Hey navindesigns,

    Please try adding this CSS code in Quick CSS:

    @media only screen and (max-width:1023px) and (min-width:768px) {
  .page-id-170 #av_section_1 .entry-content-wrapper .av_one_fourth.first, 
  .page-id-170 #av_section_1 .entry-content-wrapper .av_one_fourth.avia-builder-el-last {
    display: none;
  }

  .page-id-170 #av_section_1 .entry-content-wrapper .av_one_fourth.av-mz0ia-51665eaae8c457c5c0d459575ed5772f {
    margin-left: 0;
  }

  .page-id-170 #av_section_1 .entry-content-wrapper .av_one_fourth.av-h8keq-51eaed5d1c528d5c1ae8e95afdbcba7f {
    clear: none;
    margin-top: 0;
    margin-left: 4%;
  }
}

    Best regards,
    Nikko

    October 20, 2021 at 7:40 pm #1325774
    navindesigns

    Thanks. That works

    But now if I put “individual height” on other places like https://shawnstoppable.com/about/ (first block), it breaks into the second line. I am not sure if this is related to that as well

    October 21, 2021 at 7:12 am #1325808
    Ismael

    Hi,

    Thank you for the update.

    Did you add the following css code? The css adjusts the width and margin of the 1/4 column element and causes the next column (3/4) to move to the second line.

    div .av_one_fourth {
    margin-left: 2%;
    width: 24.5%;
}

    This is the default style or width of 1/4 column element.

    div .av_one_fourth {
    margin-left: 6%;
    width: 20.5%;
}

    Best regards,
    Ismael

    October 21, 2021 at 2:56 pm #1325891
    navindesigns

    Yes, I did

    I wanted to reduce the spacing between columns on 1/4 but I guess I need to add the same for 3/4 now?

    Please provide me with that code

    thanks

    October 22, 2021 at 4:25 am #1325966
    Ismael

    Hi,

    Thank you for the clarification.

    Try to use this css code to adjust the width and left margin of the 3/4 column.

    div .av_three_fourth {
    margin-left: 2%;
    width: 73.5%;
}

    Default left margin is set to 6%.

    Best regards,
    Ismael

    October 28, 2021 at 3:04 pm #1326866
    navindesigns

    that works

    thanks

    October 29, 2021 at 12:09 pm #1326983
    Ismael

    Hi,

    No problem. Please feel free to open another thread if you need anything else.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Fix alignment issue on one breakpoint’ is closed to new replies.