Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #648284

    Hi, I have pages on my site where we have color sections with flex columns containing one column with an image, and one column with a text block. Every other section is reversed so that the image is on the left in the first, on the right in the second. This is fine, except when looking at it on mobile and then the sections get confusing. I have tried a few styling tricks but haven’t had any luck… here is a link to the last one I tried that didn’t work: http://jsfiddle.net/5rd9xwsc/82/

    I’ve put custom CSS classes on the rows and columns to try and achieve this, and added CSS as in the link…

    .wpb_row {
    display: flex;
    flex-direction: row;
    }
    .wpb_column {
    width: 200px;
    border: 1px solid black;
    padding: 5px;
    /*flex-grow: 1;*/
    }
    img {
    width: 100%;
    }
    @media (max-width: 400px) {
    .wpb_row {
    flex-direction: column;
    }
    .wpb_row:nth-child(even) {
    flex-direction: column-reverse;
    justify-content: flex-end;
    }
    }

    Doesn’t seem to work.
    Can you please offer some guidance on this one?

    Thanks!
    Janet

    #648969

    Hey Janet,

    I’m not too familiar with the CSS you’re trying there unfortunately and I’m not sure how much support it has in browser either. I think the easiest solution for you would be to create separate sections for mobile designed the way you want it, then hide/show the correct one depending on screen size using CSS like this:

    @media only screen and (max-width: 767px) {
    #desktop-section {
    display:none !important;
    }
    }
    
    @media only screen and (min-width: 768px) {
    #mobile-section {
    display:none !important;
    }
    }

    Regards,
    Rikard

    • This reply was modified 8 years, 4 months ago by Rikard.
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.