Black Friday sale! Get 25% off WPSP Pro! Discount automatically applied at checkout.

[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

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.