Select Page

CSS CODE 3 Column layout

/*Styling for the posts*/
.ds-thumbnail-blog2 .et_pb_post {
background-color: #fff;
min-height: 350px;
margin-bottom: 50px;
}
/*Sets the image size posts and moves it to the left of the text*/
.ds-thumbnail-blog2 .et_pb_post a img {
float: right;
width: 400px;
height: 350px;
object-fit: cover;
margin: 0 40px 0 0;
}
/*Resize the overlay to fit the image*/
.ds-thumbnail-blog2 .et_overlay {
width: 400px !important;
height: 350px !important;
}
/*Stack the image and content on smaller screens*/
@media only screen and (max-width: 980px) {
.ds-thumbnail-blog2 .et_pb_post a img {
width: 100%;
height: 500px;
object-fit: cover;
margin: 0 0 40px 0;
}
/*Resize the overlay on smaller screens*/
.ds-thumbnail-blog2 .et_overlay {
width: 100% !important;
height: 500px !important;
}
.ds-thumbnail-blog2 .et_pb_post h2 {
margin: 40px 30px 20px 30px !important;
}
.ds-thumbnail-blog2 .et_pb_post p {
margin: 0 30px;
}
.ds-thumbnail-blog2 a.more-link {
margin: 20px 0 30px 30px;
}

.ds-thumbnail-blog2 .post-content {
padding: 30px 30px 80px 30px;
}
}
/*Add a little top padding to the post titles*/
.ds-thumbnail-blog2 .et_pb_post h2 {
padding: 40px 0 20px 0 !important;
}
.ds-thumbnail-blog2 .et_pb_post p {
font-size: 18px;
margin-right: 40px;
}
.ds-thumbnail-blog2 .post-meta {
font-size: 14px !important;
}
/*This styles the read more link*/
.ds-thumbnail-blog2 a.more-link {
display: inline-block;
position: absolute;
left: 440px;
border: 1px solid #ed1e79;
padding: 10px !important;
background: #ed1e79;
color: #ffffff;
margin-top: 50px;
text-transform: uppercase;
}
@media only screen and (max-width: 980px) {
.ds-thumbnail-blog2 a.more-link {
margin: 40px 0 20px 0;
}
}
/*This styles the read more link on hover*/
.ds-thumbnail-blog2 a.more-link:hover {
border: 1px solid #ed1e79;
color: #ffffff;
background: #ed1e79;
}
/*This adds the double arrow icon to the read more link*/
.ds-thumbnail-blog2 a.more-link:after {
font-family: ‘ETmodules’;
content: “\39”;
color: #000;
margin-left: 5px;
vertical-align: middle;
}
/*This styles the double arrow on hover*/
.ds-thumbnail-blog2 a.more-link:hover:after {
color: #fff;
}
/*This styles the post pagination links*/
.pagination a {
background: #fff;
color: #000;
padding: 10px;
margin-top: 30px !important;
-webkit-box-shadow: 6px 7px 5px -6px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 6px 7px 5px -6px rgba(0, 0, 0, 0.75);
box-shadow: 6px 7px 5px -6px rgba(0, 0, 0, 0.75);
}
/*This styles the post pagination links on hover*/
.pagination a:hover {
background: #000;
color: #fff;
}
/***Three Column Styles***/
/*This sets the spacing between post rows*/
.ds-blog-square .post-content {
display: none;
}
.ds-blog-square {
display: flex;
flex-direction: row;
justify-content: center;
}
.ds-blog-square .et_pb_image_container {
margin: -19px -19px 0;
}
.ds-blog-square h2 {
margin: 0;
padding: 0;
}

.ds-blog-three-column .et_pb_post {
margin-bottom:5%;
}
.ds-blog-square a img {
width: 100%;
object-fit: cover;
}
.ds-blog-square .post-content {
display: none;
}
.ds-blog-square .et_pb_image_container {
margin: -19px -19px 0;
}
.ds-blog-square h2 {
margin: 0;
padding: 0;
}
.ds-blog-square .et_pb_post {
position: relative;
padding-bottom: 40;
border: none;
}
/*This section sets the height of the images on different screen sizes to keep it relatively square. If you are not using object-fit because it isn’t supported in IE and Edge then you should remove this entire section or the images will be distorted*/
.ds-blog-three-column .ds-blog-square a img {
height: 30vh !important; /*Adjust this value if you want the images taller or shorter*/
}
@media only screen and (max-width: 1440px) {
.ds-blog-three-column .ds-blog-square a img {
height: 40vh !important; /*Adjust this value if you want the images taller or shorter*/
}
}
@media only screen and (max-width: 1280px) {
.ds-blog-three-column .ds-blog-square a img {
height: 35vh !important; /*Adjust this value if you want the images taller or shorter*/
}
}
@media only screen and (max-width: 768px) {
.ds-blog-three-column .ds-blog-square a img {
height: 28vh !important; /*Adjust this value if you want the images taller or shorter*/
}
}
@media only screen and (max-width: 480px) {
.ds-blog-three-column .ds-blog-square a img {
height: 40vh !important; /*Adjust this value if you want the images taller or shorter*/
}
}
/*Add a little top padding to the post titles*/
.et_pb_post h2 {
padding: 10px 0 10px 0 !important;
text-align: center;
}
.et_pb_post p {
font-size: 18px;
margin-right: 40px;
}
.post-meta {
font-size: 14px !important;

text-align: center;
}

Share On Facebook
Share On Twitter
Share On Pinterest