Sela 3-Column Grid Page

  • Unknown's avatar
    samhochsteingmailcom · Member ·

    I am trying to make the grid page into three columns, but I am having some trouble with blank spaces and strange line breaks. This is the code I am using —

    @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;
    }
    }

    Thanks so much for your help!

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, the issue is actually caused by the inconsistent image proportions (height to width), and it was the Beach image that was causing the issue. There is 3px of padding in the nth-child(3n) rule in the replacement CSS below that takes care of that, but I would suggest keeping the general proportions on your featured images consistent. Most of your images seem to be around 350×242. Beach and St. Ann’s are smaller.
    Remove this from your custom CSS 

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

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

.child-page:nth-child(4n) {
	clear: both;
}

    and replace it with this. 

    @media screen and (min-width: 1180px) {
.child-page {
    width: 332px;
}
.child-page:nth-child(2n) {
    margin-right: 55px;
}
.child-page:nth-child(3n) {
    padding-bottom: 3px;
    margin-right: 0;
}
}

    [Props to our developer, @ernesto for helping out with this]

  • The topic ‘Sela 3-Column Grid Page’ is closed to new replies.