Need help? Check out our Support site, then

Snap Homepage - Post Area modifications

  1. Hello.
    My client wants some changes in the homepage Posts Area.
    My questions are:
    + How can I increase the feature image size?
    + How can I deleted all text below image? (including the date and title)
    + How can I add a square in the VIEW MORE link to look like the one in the slide above? The idea is to have this link inside the image.

    The idea is to reduce the blank area between the images. More compact.

    Thanks in advance.

    The blog I need help with is

  2. Howdy! Heh this was an energizer bunny CSS project and kept on going, and going...

    Add this to the custom CSS and see what you think. It narrows the left are with the blurb and then widens the images, gets rid of the title/content below the images

    #blurb {
        width: 20%;
    .with-sidebar {
        width: 75%;
    .tile .post img {
        max-height: 275px;
    .with-thumb .grid-content-wrapper {
        display: none;
    .tile .post .post-wrapper {
        height: 260px;
    .tile .post:nth-child(1), .tile .post:nth-child(2), .tile .post.last-of-posts {
        height: 280px;
    .grid-read-more {
        position: relative;
        right: 10px;
        top: -50px;
    .tile .post:nth-of-type(2n+1) .set-post {
        padding-right: 3%;
    .tile .post:nth-of-type(2n) .set-post {
        padding-left: 3%;
    .tile .post {
        padding-top: 1%;
  3. Yes Howdy! : )
    Thanks, it works exactly as they want.

    I have two questions:
    1) in the blog page how can I say trought css that the date and the title must be visible?

    .with-thumb .grid-content-wrapper {
        display: none;

    Is there any way to declare ''display:none'' for the homepage post area, and ''display:block'' for the post page?

    2) last question: is it possible to change 'read more' to 'view more'

    Once again, thanks for your time helping.

  4. You can specifically target the home page by including the "home" body class. You can find the body classes for each page by looking in the opening body tag. To target only the home page for the rule you referenced, use the following.

    .home .with-thumb .grid-content-wrapper {
        display: none;
  5. Hello thesacredpath.
    Once again, thanks for your help and time.
    I understand what you said.
    I'd also tried that code with .blog instead of .home, and it works.
    So, when trying to give a different height between posts in blog page, I use the class blog, but in these lines isn't making any difference:

    .blog.tile .post:nth-child(1), .blog.tile .post:nth-child(2), .blog.tile .post.last-of-posts {
        height: 290px;

    Let me explain. So, homepage it's OK, but blog post should show title and date. In that order I need the height to be higher than homepage.
    Am I making any sense?

    Secondly, why the posts after the 2nd row have a different visual behavior?

    Once again, thanks for your time helping.

  6. Your code is fine, with the exception of a few missing spaces in the selectors. You need a space between .blog and .tile on all three, like this:

    .blog .tile .post:nth-child(1), .blog .tile .post:nth-child(2), .blog .tile .post.last-of-posts

    Yes, using .home and .blog body classes to style those two separately is the way to go.

  7. Oh : ) I get it.

    Now, I added two more post in the Homepage, and realize that the same issue height happens between the posts (as in the blog).

    In that order, I tried this code:.tile .post:nth-child(3) and it works (not exactly with the same height as the previous posts). But if I had 100 posts I don't want to write this to each one.

    In my small-code-brain I ask: should this code be the answers to this issue?
    .blog .tile .post.last-of-posts

    Thanks thesacredpath.

  8. P.S. because the code: .blog .tile .post.last-of-posts it's not doing what my little-code-brain was thinking.
    : )

  9. Let's start again from scratch. I used the demo site and Firebug in Firefox to come up with the following which removes the date and excerpt, moves the read more up under the image and tightens up the spacing (at least with Firebug on the demo. Copy our your code for safe keeping and then try this:

    .home .with-thumb .grid-content-wrapper {
        display: none;
    .home .tile .post .post-wrapper {
        height: 220px;
    .home .tile .post {
        height: 270px;

    I didn't try this on the blog page, just on the home page. Are you looking for the same sort of spacing on the blog page except keeping the title and date? If so, give this a try for that page to tighten up the spacing between the top 4 and the ones below.

    .blog .tile .post {
        height: auto;
  10. You rock! Many thanks for the help and time.

  11. You are welcome.

  12. Hello again.

    All works fine, but the two first posts in the blog still have their heigh bigger than the rest.
    The code we've is:
    .blog .tile .post {
    height: 325px;

    .blog .tile .post .post-wrapper {
    height: 245px;

    What's missing?
    Thanks in advance. (again)

  13. Hi thesacredpath, can you help me in this one?
    Thanks in advance.

  14. All the posts have the same height. The difference is that the first two have 0 top padding.

  15. justpi: thank you for your time in helping.
    it's all fine now.

  16. Yay! @justpi to the rescue!

  17. Hey again.
    I'm not crossing or reforcing any post, justpi alert me about the problem I'm goint to explain in another message, but it's about this subject.

    Drag the browser window to make it narrower and the space between the thumbnail and the read button is big. I'm trying, with no sucess, to define the height of grid:

    .home .with-thumb .grid-content-wrapper {
        max-height: 2px;

    I thought this white space was for the text I'm not displaying.

Topic Closed

This topic has been closed to new replies.

About this Topic