[Resolved] Styling for mobile layout

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Styling for mobile layout

This topic contains 5 replies, has 2 voices, and was last updated by  Tom 3 weeks, 6 days ago.

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

    Bas
    Participant

    Hi Tom,

    I’m having difficulties styling a list that looks good on desktop but bad on mobile.
    If you look at my website HERE you can see the list just below the hero looks fine but on mobile I want it to look like the image below.
    The part below “Latest Products” is what i’m trying to achieve.

    I hope you can help me with some CSS.

    list example

    #12833

    Tom
    Keymaster

    Hi there,

    Does this help?:

    @media (max-width: 767px) {
        #wpsp-8184 img {
            max-width: 150px;
        }
    
        #wpsp-8184 .wp-show-posts-image.wpsp-image-left {
            float: left;
        }
    
        #wpsp-8184 .wp-show-posts-entry-title {
            font-size: 20px;
        }
    
        #wpsp-8184 .wp-show-posts-entry-summary {
            display: none;
        }
    }

    Let me know 🙂

    #12862

    Bas
    Participant

    Hi,

    Thanks for the fast reply, but I was talking about the list just below the page hero with .top-categories classname 🙂

    #12872

    Tom
    Keymaster

    Ah, try this instead:

    @media (max-width: 767px) {
        #wpsp-8284 img {
            max-width: 150px;
        }
    
        #wpsp-8284 .wp-show-posts-image.wpsp-image-center {
            float: left;
            margin-right: 20px;
        }
    
        #wpsp-8284 .wp-show-posts-entry-title {
            font-size: 20px;
            padding: 20px;
        }
    
        #wpsp-8284 .wp-show-posts-entry-summary {
            display: none;
        }
    }
    #13013

    Bas
    Participant

    Thank you Tom, this surely put me in the right direction 🙂

    #13022

    Tom
    Keymaster

    You’re welcome 🙂

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.