Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • June 14, 2016 at 10:05 pm #648284
    janetgot

    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

    June 16, 2016 at 4:49 am #648969
    Rikard

    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.
  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.