Styling for mobile layout

Tagged: mobile list layout

This topic has 5 replies, 2 voices, and was last updated 3 years ago by Tom.

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.

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.

[Resolved] Styling for mobile layout