[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

Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 22, 2020 at 3:00 pm #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

    January 22, 2020 at 5:31 pm #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 🙂

    January 23, 2020 at 3:14 pm #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 🙂

    January 23, 2020 at 6:06 pm #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;
    }
}
    January 29, 2020 at 2:19 pm #13013
    Bas
    Participant

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

    January 29, 2020 at 5:55 pm #13022
    Tom
    Keymaster

    You’re welcome 🙂

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.