Okay
  Public Ticket #1918232
Instagram Feed Displaying Incorrectly on Mobile
Closed

Comments

  • JakeDigitalfuel started the conversation

    Hi There,

    I've had a look and the order of the instagram posts on desktop works as Header > Latest Image > Second Post > Third Post. Which is correct however, on mobile you order stacks in a bizarre way Latest Image > Second Post > Third Post > Header. So the user doesn't realise it's the instagram feed till they are past it. Is there a way I can reorder the stack for mobile.

    I basically need to have this

    <div class="column block-strip-thumb is-3-desktop is-6-tablet">
    <div class="column block-strip-thumb is-3-desktop is-6-tablet">
    <div class="column block-strip-thumb is-3-desktop is-6-tablet">

    <div class="column is-3-desktop is-6-tablet block-strip-title-column">


    to 


    <div class="column is-3-desktop is-6-tablet block-strip-title-column">

    <div class="column block-strip-thumb is-3-desktop is-6-tablet">
    <div class="column block-strip-thumb is-3-desktop is-6-tablet">
    <div class="column block-strip-thumb is-3-desktop is-6-tablet">

     as there is this styling in the css, taking the "block-strip-title-column"

    @media screen and (min-width: 769px)
    .block.block-strip .block-strip-title-column {
        -webkit-box-ordinal-group: 0;
        -webkit-order: -1;
        -ms-flex-order: -1;
        order: -1;
    }

    So this reorders the title post to the front. 

  •  240
    Elena replied

    Hi Jake,

    Use this code:

    @media screen and (max-width: 768px) {
        .block.block-strip .columns {
            display: flex;
            flex-direction: column;
        }

        .block.block-strip .block-strip-title-column {
            -webkit-box-ordinal-group: 0;
            -webkit-order: -1;
            -ms-flex-order: -1;
            order: -1;
        }
    }

    Cheers, P.