Making Flex Items Center on Mobile?

Discussion in 'Wordpress Support' started by MASSEY, Nov 23, 2017.

Thread Status:
Not open for further replies.
  1. MASSEY

    MASSEY UKBF Legend Full Member

    10,328 1,783
    I have three columns which i am making equals at 33% and it all stays pretty central until i introduce a media query to make them stack on top of each other at screens 651px or less.

    @media all and (max-width: 651px) {
    .flex-item-top-footer {
    flex-basis: 100% !important;
    align-self: center !important;
    }
    }

    When they stack it left aligns.

    I tried adding margin-left: 33%; and margin-right: 33%; which did move it to the middle but the items themselves were still slightly out of line with each other.

    Is there a code to help keep them in the middle with each item the same width?
     
    Posted: Nov 23, 2017 By: MASSEY Member since: Nov 29, 2009
    #1
  2. Mike Hayes

    Mike Hayes UKBF Enthusiast Free Member

    1,131 313
    It's difficult to say without seeing all of the CSS and HTML, there are just so many ways this could be set up and so many potential causes! My first guess would be a rogue justify-content or text-align property somewhere - you should be able to find the problem property using your browser's dev tools.

    However the way I would often deal with the situation described is to leave the block elements to stack by default (on mobile screens), then align them horizontally on desktops.

    Something like this:

    Code:
    /** The elements should be stacked vertically by default **/
    
    /** On desktops, we'll align the elements in a row using flexbox **/
    @media (min-width: 652px) {
        .flex-item-container {
            display: flex;
        }
        .flex-item {
            flex: 0 0 33.33%;
        }
    }
    
     
    Posted: Nov 23, 2017 By: Mike Hayes Member since: Jan 7, 2016
    #2
  3. MASSEY

    MASSEY UKBF Legend Full Member

    10,328 1,783
    I tried your way but ended up with the same issue.

    Looking in the browser tools and messing i found that

    @media (max-width: 651px) {
    .flex-item-top-footer .et_pb_blurb_content {
    text-align: -moz-center;
    text-align: -webkit-center;
    }
    }

    Was the only way to get it to work.

    My issue now is, they stack central but the top stack text ends up 5px out of sync which i fixed with negative margin, but on IE i can't get the webkit to work.

    Is there a code to get them to stack like i've managed but maintain proportion so that there's no need to negative the margin?
     
    Posted: Nov 24, 2017 By: MASSEY Member since: Nov 29, 2009
    #3
  4. MASSEY

    MASSEY UKBF Legend Full Member

    10,328 1,783
    Posted: Nov 24, 2017 By: MASSEY Member since: Nov 29, 2009
    #4
  5. fisicx

    fisicx It's Major Clanger! Staff Member

    32,663 9,678
    Posted: Nov 25, 2017 By: fisicx Member since: Sep 12, 2006
    #5
Thread Status:
Not open for further replies.