[Resolved] List Style Posts On Category/Archive On Mobile (Custom Mobile Archive Layout)

[Simon]

I have found that on mobile, a list style of posts is much more user friendly than the tradition image over content.

I just thought i would share the code I used to do it as I have not seen any reference to it anywhere else on here. Maybe if you see anything majorly wrong with it let me know.

The result will have your mobile category pages looking like this does on desktop:
https://generatepress.com/category/development/

Code:

@media (max-width: 768px) {
.archive .post-image {
  float: left;
  margin-top: 0em!important;
  margin-bottom: 0em!important
  margin-left:0px;
  margin-right: 1em;
    }
.archive .post {
  margin-bottom: 0px;
    }
.archive .post-image img {
  max-width: 100px;
  vertical-align: middle;
    }
.archive .inside-article {
  border-bottom: 1px solid #e2e2e2;
	}
.archive h2.entry-title {
  font-size: 16px;
	}
.archive .meta-area-2 {
  font-size: 13px;
	}
.archive .entry-summary {
  display: none;
	}

Cheers,
Simon

[Tom]

Awesome – looks great! Thanks for sharing 🙂

[Author]

Posts