Change Mobile Layout for Standard List View?

  • Resolved AZBros

    (@azbros)


    8 years, 9 months ago

    I hope I can explain this and really hope there’s a simple way to achieve it.

    Okay, with the default blog layout, posts are displayed in a grid. When the screen size is decreased (such as being viewed on a mobile device), the posts are automatically displayed in a single column with the featured image on top, then the title and the post excerpt.

    When using the “Standard List” blog layout, the mobile view is slightly different. The featured image is decreased in size and remains on the left side of the screen while the title and post excerpt are displayed to the right.

    Is there any way to allow the Standard List blog layout to display the same way the default, grid style layout does when viewing the website on a mobile device or smaller screen?

    Thanks, I’m sure this will come in handy for others using the Standard List view on the Hueman theme.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi AZBros. Yes, this can be done with a CSS media query. What you’ll find though is, because the Standard Blog List uses a different image size, the image will likely be oversized on the mobile view because it is stretched to 100% of the content width:

    /* restructure Standard Blog List on mobile */
@media only screen and (max-width: 719px) {
  .post-standard .post-inner {
    padding-left: 0;
  }
  .post-standard .post-thumbnail {
    margin-left: 0;
    max-width: 100%;
    float: none;
  }
  .post-standard .post-content {
    float: none;
  }
}
    Thread Starter AZBros

    (@azbros)

    Hhm… seemed to work perfect for me! It looks and functions exactly how I wanted it to. Thank you once again, you’re the best!

    It looks and functions exactly how I wanted it to.

    Well, in the end, that’s what counts. Glad it’s working.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change Mobile Layout for Standard List View?’ is closed to new replies.