three columns on home page (sight theme)

  • Author
    Posts
  • #2803004

    usinarevista
    Member

    Hi ppl,

    How can I display the posts in three columns at the home page? I don’t mind if the sidebar and the excerpts are gone to make room

    Thanks

    The blog I need help with is revistausina.com.

    #2803242

    Hi there, Whew! You have so much custom CSS, and some stuff in your custom CSS is interfering with being able to make things into columns on your main page. There is also some stuff you have done that can be simplified considerably. What I’m going to suggest is that you copy out all of your existing CSS, save it in a plain text file for reference and then delete it and add the following which gets you your three columns of posts on the main page. I’ve limited the 3-column display to screens/windows 768px and wider as below that the columns get too narrow and hard to read.

    On the other CSS changes you did, let’s start over and add those back in a bit at a time so that we don’t mess up the new layout. I’m happy to work with you on this so that you get everything you want as far as changes.

    @media screen and (min-width: 768px) {
    .blog #secondary {
    	display: none;
    }
    .blog #primary {
    	width: 100%;
    }
    .blog #content {
    	display: flex;
    	flex-direction: row;
    	flex-wrap: wrap;
    	justify-content: space-between;
    	padding-left: 2em;
    	padding-right: 2em;
    }
    .blog #content .post {
    	max-width: 30%;
    	padding-left: 0;
    	padding-right: 0;
    }
    .blog .entry-thumbnail {
    	max-width: 100%;
    }
    .blog #content .latest-posts-header {
    	display: none;
    }
    .home .hentry {
    	border: none !important;
    }
    }

    #2803246

    usinarevista
    Member

    Thanks very much for your help thesacredpath. I’ll start the change then I’ll get back here. I’ve worked completely with trial and error on that CSS, that’s why it’s such a mess hehe

    It-s gonna be a relief to start fixing it

    #2803247

    usinarevista
    Member

    Hey thesacredpath. I’ve been working on the new CSS but I’m waiting until a few things are so I can update it over the old and messy one.

    Could you please help me with three things? I tried the following codes but they did not work:

    1. Centralize the main menu.

    .main-navigation {
    text-align: center;

    2. Hide all posts that are from instantaneos-category from the home page. I’d like to show them only on its archive and on the featured slider. I tried:

    .home .category-instantaneos {
    display: none;
    }

    3. Hide from all posts .entry-meta. And hide .entry-content (the excerpts) only from posts on the home page. These ones I haven’t tried.

    Thank you very much!

    #2803249

    usinarevista
    Member

    Hey! Should I start a new thread or can I keep posting here? I’m not sure how to proceed. Also, I’ve been searching and I think there’s no way to hide a category from the home page, right? I think I can just unstick manually the posts then…

    #2803255

    I’ll reply to your 3 questions here, and then if you could start a new thread, that would be great.

    1. Centralize the main menu.
    .main-navigation {
    text-align: center;

    I see the above in your custom CSS and see that the menu is centered. I do see a missing ending curly bracket on the above. Was that the problem?

    2. Hide all posts that are from instantaneos-category from the home page. I’d like to show them only on its archive and on the featured slider. I tried …

    We need to get a bit more specific with the CSS selector to do this. “.hentry” is one of the typically used CSS classes for the posts themselves. Note also that there is no space betweeen .hentry and .category-instantaneos since that CSS class is in the same div as .hentry.

    .home .hentry.category-instantaneos {
        display: none;
    }

    3. Hide from all posts .entry-meta. And hide .entry-content (the excerpts) only from posts on the home page. These ones I haven’t tried.

    To hide the entry meta (tags/categories/date, etc.) on all posts, this is all you will need.

    .entry-meta {
        display: none;
    }

The topic ‘three columns on home page (sight theme)’ is closed to new replies.