Making Grid into Three Columns

  • Hi,
    I”m trying to amend the grid template so that it displays 3 columns. I used the CSS from another post that suggested:
    .page-template-grid-page .content-wrapper.full-width {
    margin: 0;
    }

    .child-page {
    width: 275px;
    padding-left: 50px;
    }

    .child-page {
    margin-right: 0 !important;
    padding-right: 35px;
    }

    however, I’m still having issues. See here:
    https://littleglobalchefs.com/recipes/

    There is a blank space in space 4. Any suggestions on what I should add into the CSS?

    Also, please note, I have no idea what I’m really doing with the customizable CSS. All I did was copy and paste the above code (not knowing what it really means) into the CSS widget ?? Any help, much appreciated.

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

    (@sacredpath)

    Automattic Happiness Engineer

    Hi there, since you are hosted at WordPress.com, the CSS forum there would be the better place to ask. These forums are for those that have self-hosted installs of Sela and things on WordPress.com and self-hosted WordPress installations can be quite different.

    That said, you are quite close, but due to the way things are structured, we need to add one more rule to what you have and then also enclose the rules in a Media Query to limit this change to 1180px and wider screens or things go awry below that. Here would be the code.

    @media screen and (min-width: 1180px) {
.page-template-grid-page .content-wrapper.full-width {
margin: 0;
}
.child-page {
width: 275px;
padding-left: 50px;
}
.child-page {
margin-right: 0 !important;
padding-right: 35px;
}
.child-page:nth-child(4n) {
clear: both;
}
}

    Hi, used this code and it worked until I had only 2 lines of three columns. Now I had more than 2 lines, and the number will increase, and in the line 3 I have only 1 image, and the same is the line 4.
    You can see the page here https://supermamiblog.com/b/per-ingrediente/
    Any suggestion about what I should do?
    Thanks,
    Ilaria!

    Hi @ilariasupermami,

    Could you please try removing the following part from your custom CSS?

    @media screen and (min-width: 1180px) {
.child-page:nth-child(4n) {
    clear: both;
}
}

    If that doesn’t resolve the issue, please start a new thread on this forum (so the original poster doesn’t continue to receive email notifications) and I’ll be happy to take a deeper look from there.

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Making Grid into Three Columns’ is closed to new replies.