Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • December 10, 2018 at 9:10 pm #1043341
    Birdster

    I have implemented some code found in your support forum to make a 3 column layout become 2 columns on a mobile device. This works great, except for when one of the Left hand side columns has content that forces a new line of text. This is best seen using the private link and scaling the browser width down until the 5th from the bottom column ( a team member named Laura) jumps to a new line and causes the next row to jump across to the right leaving a blank space.

    This only occurs on the left hand side, as i have tried changing the column order and when a right hand column is higher than it’s left, the problem does not happen.

    Any insight into this problem would be greatly appreciated, and i have attached login details in case you need to check the code i copied to the ‘teamgrid’ class.

    December 17, 2018 at 2:02 am #1046112
    Basilis

    Hey Birdster,

    Can you please share the code for us so we can get a review – what exactly have you implemented?

    Best regards,
    Basilis

    December 17, 2018 at 2:50 pm #1046315
    Birdster

    Hi Basilis, here is the code that was added to my css to make the 3 columns stay as two on mobile devices:

    .page-id-21 .av_one_third {
display:inline-block !important; 
}
@media only screen and (max-width: 767px) {
.responsive #top #teamgrid .container .av-content-small, .responsive #top #wrap_all #teamgrid .flex_column, .responsive #top #wrap_all #teamgrid .av-flex-cells .no_margin {
    width: 50%;
    float: left;
    clear: none;
}}

    Thanks,

    December 21, 2018 at 4:22 am #1048002
    Ismael

    Hi,

    Thanks for the update.

    I can’t seem to reproduce the issue on my end. This is what I see on mobile view:

    // https://imgur.com/a/vzyGo6a

    Could you give us a screenshot of the issue?

    Best regards,
    Ismael

    December 21, 2018 at 12:09 pm #1048140
    Birdster

    Hi ismael,

    Assuming that pic you’ve sent is the iphone 5 screen resolution or smaller, you just need to scroll down the page to see the issue. I’ve sent a link privately that shows a screen grab of where the jump occurs.

    Thanks for your help,

    December 23, 2018 at 4:28 pm #1048810
    Ismael

    Hi,

    Have you tried disabling the “Equal Height Columns” settings for that row?

    Best regards,
    Ismael

    January 3, 2019 at 12:10 pm #1049582
    Birdster

    Hey Ismael,
    Thanks for your suggestion, I did try this but it did not seem to affect anything. Plus, if it did work, then the result would likely not be what I am after, as the left and right columns would not be correctly aligned. Please let me know if you have any other thoughts?

    January 3, 2019 at 8:41 pm #1049709
    Birdster

    now solved. It was something to do with the float:left, when the 3 columns went to 2 columns on a mobile, so some custom code was needed to clear:both for every div tag involved in each column.

    Thanks,

    January 4, 2019 at 5:42 am #1049805
    Rikard

    Hi,

    Great, glad you got it working and thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    January 4, 2019 at 1:03 pm #1049970
    Birdster

    please close it thanks.

    January 5, 2019 at 7:26 am #1050243
    Rikard

    Hi,

    Thanks for letting us know. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘2 columns on mobile jumping on one side not the other?’ is closed to new replies.