Skip to content

Instantly share code, notes, and snippets.

@AchalJ
Created January 2, 2026 12:14
Show Gist options
  • Select an option

  • Save AchalJ/018a03c77ea9b3974054321e5f39e645 to your computer and use it in GitHub Desktop.

Select an option

Save AchalJ/018a03c77ea9b3974054321e5f39e645 to your computer and use it in GitHub Desktop.
Content Grid - Carousel 4 Custom Layout
.owl-carousel {
overflow: visible;
}
.owl-item {
transform: scale(1);
transition: all 1s ease;
}
.owl-item:not(.center) {
transform: scale3d(0.85, 0.85, 1);
opacity: 0.6;
}
.pp-flexbox {
display: flex;
align-items: center;
}
.pp-flexbox-column {
flex-direction: column;
}
.pp-content-post {
margin: 20px 10px !important;
}
.pp-content-grid-post {
font-size: 14px;
min-height: 500px;
}
.pp-content-grid-post-image {
padding: 0;
}
.pp-content-grid-post-text {
padding: 40px;
position: static !important;
transform: none !important;
opacity: 1 !important;
text-align: left;
}
.pp-content-grid-post-title {
font-size: 26px;
line-height: 26px;
padding: 0;
margin-bottom: 20px;
}
.pp-content-grid-post-meta {
padding: 0;
}
.pp-content-grid-post-meta a {
text-decoration: none;
}
.pp-content-grid-post-meta,
.pp-content-grid-post-meta a {
color: #888;
font-size: 12px;
}
.pp-content-grid-post-meta a:hover {
color: #000;
}
.pp-content-grid-separator {
height: 2px;
width: 60px;
background: #000;
margin-top: 10px;
margin-bottom: 20px;
}
<div class="pp-flexbox">
<div class="pp-content-grid-post-image">
[wpbb post:featured_image size="large" display="tag" linked="yes"]
</div>
<div class="pp-content-grid-post-text">
<h3 class="pp-content-grid-post-title">[wpbb post:link text="title"]</h3>
<div class="pp-content-grid-post-excerpt">
[wpbb post:excerpt length="30" more="..."]
</div>
<div class="pp-content-grid-post-more-link">
<a href="[wpbb post:url]"><span class="fa fa-angle-right"></span> Read More</a>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment