[Resolved] Align Post title left/right for mobile only

Home Forums Support [Resolved] Align Post title left/right for mobile only

Home Forums Support Align Post title left/right for mobile only

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1568100
    Luis

    Hi,

    I had a good look around and play with this but it’s a bit beyond my understanding (floats etc).

    Under ‘Latest research’ I would like to force the post titles to the left, so that it’s one post per row essentially.

    This is my code atm

    @media (max-width: 767px) {
        .wp-show-posts-columns .wp-show-posts-single {
            display: block;
            width: 50%;
        }
    
        #wpsp-1987 .wp-show-posts-columns {
            margin-left: -20px !important;
        }
    
        #wpsp-1987 .wp-show-posts-inner {
            margin-left: 20px !important;
            margin-bottom: 40px !important;
        }
    
        #wpsp-2048 .wp-show-posts-columns {
            margin-left: -20px !important;
        }
    
        #wpsp-2048 .wp-show-posts-inner {
            margin-left: 20px !important;
        }
    }

    //I’m a happy tipper πŸ™‚

    Thanks guys!

    #1568281
    David
    Staff
    Customer Support

    Hi there,

    just to confirm, do you want a single columns on Mobile?
    And should it be the Image (left) and Title (right) ?

    #1568299
    Luis

    Hi David,

    Yes posts for ‘latest research’ to be single column only for mobile.

    Image to the right and post title left.

    (I can play around with the margins after to get it sitting right if need be)

    Thanks in advance!

    πŸ™‚

    #1568366
    David
    Staff
    Customer Support

    Try this CSS:

    @media (max-width: 768px) {
        .wp-show-posts-columns#wpsp-1987 {
            flex-direction: column;
        }
    
        .wp-show-posts-columns#wpsp-1987 .wp-show-posts-single {
            width: 100%;
        }
    
        .wp-show-posts-columns#wpsp-1987 .wp-show-posts-inner {
            display: flex;
            flex-direction: row-reverse;
        }
        /* Set Image width */
        .wp-show-posts-columns#wpsp-1987 .wp-show-posts-image.wpsp-image-center {
            flex: 0 0 33%;
            margin-left: 20px;
        }
    }
    #1569161
    Luis

    Thanks David!

    Worked like a charm.

    πŸ™‚

    #1569185
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.