Two columns in category page

  • Unknown's avatar
    usinarevista · Member ·

    Hey everyone,

    I’m trying to display the posts in two columns in some specific categories. I set to hide the sidebar outside the home page. So for instance, in the category named “entrevistas” there is enough space to display the posts side by side. If it’s possible, I was thinking about three options:

    1- Two posts side by side, each with excerpt on top, image on the bottom

    2- Reduce the size of the posts/images, so they both fit side by side the way it is.

    3- A complex CSS customization so the text is overlapped with the image but hidden, appearing when hovering

    Is any of it possible?

    Thanks in advance!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Doing two columns on a category page is tricky, and having the text content over the image can make it hard to find a text color that will work on all images, unless we add some sort of background color to the text that at least, in part, obscures the image. Second problem with adding the content on hover is that you cannot hover with a touch device, so people on tablets and phones won’t be able to see the text on the categories page. They will have to tap the post title and go to the single post page to see the text.

    The other issue we have in that Infinite Scroll loads 7 posts at a time, so we end up with some places where we will have a blank spot on the right column (7 posts, 21 posts, 35 posts, etc.). You can give the following a try and see what you think. I’ve limited this to 769px and wider screens, because the posts become too narrow for easy reading if we go narrower than that. 

    @media screen and (min-width: 769px) {
.category-52342 .hentry {
    display: inline-block;
    vertical-align: top;
    width: 35%;
}
.category-52342 .post-thumbnail {
    max-width: 100%;
    padding-right: 0;
    width: 100%;
    margin-left: 2.5em;
}
.category-52342 .entry-content, .category-52342 .entry-header {
    padding-left: 0;
}
.category-52342 .entry-content {
    max-width: 100%;
}
.category-52342 .entry-thumbnail {
    max-width: 100% !important;
    width: 100%;
    padding-right: 0;
    margin-left: 2.5em !important;
}
}
  • Unknown's avatar
    usinarevista · Member ·

    Hey thesacredpath,

    I’m really thankful for you help. I appreciate and understand your concerns. Indeed it seems pretty hard to make it two columns and also the hovering thing…

    So there’s no way to change the number of posts (7) displayed in infinite scroll without actually setting it to a specific number, right?

    Does the 768 px width limit the size for iPad and other tablets as well? If it does, can we keep this setting, change it to hover in PCs without affecting the touch devices?

    What I thought was to make the text go behind the image, hidden, and as we hover the image opacity is changed making it more grey and the text white in a way that is visible…

    Is that possible or will it be too much information?

    Thanks a lot again, and I’m sorry for all the trouble

  • Unknown's avatar
    thesacredpath · Member ·

    On themes that have a footer widget area, if you put in footer widgets, and turn off infinite scroll at Settings > Reading, the theme will revert to letting you set the number of posts at Settings > Reading. Unfortunately Sight doesn’t feature a footer widget area.

    There are some tablets that are 600px, and some 900px, but yes, the 768px is standard iPad.

    It used to be that you could use pixel density in Media Queries, but then along came the MacBooks with high-density Retina) screens, so that solution no longer works. Since touch devices can’t “hover” you would need to have two designs (one touch and one not touch), but there isn’t much of a way to detect that. There are some solutions out there that used to work, but they aren’t effective anymore from what I have read.

    It is technically possible to fade the image out and fade the text in on hover, but then we run back into the issue of detecting the device type, and width along will not do it. I could have my browser window set at 765px in width, and that would end up getting the non-hover design.

  • The topic ‘Two columns in category page’ is closed to new replies.