No replies
Jeffez
Jeffez's picture
Offline
newbie
Last seen: 1 year 51 weeks ago
Timezone: GMT-4
Joined: 2017-07-19
Posts: 1
Points: 2

Hi guys,

I am no a pro in CSS but I have been playing back and forth with this CSS codes and I don't find how to solve my issues. I am trying to just take off the margins between the blog posts, to and bottom and leave the width of each row the how equal.

I reproduce this blog post layout (https://divisoup.com/how-to-create-a-2-3-or-4-column-square-blog-layout/) exactly and it worked perfectly but now, I just want to remove all the margins (or have it at 1-2px everywhere around the posts.) The width is okay.

It would be best to change for the 2 column and 3 column individually I think. The posts need to be responsive and not stack over each other and the 2 posts in the 2 columns layout need to stay on the same row.

The 2 column and the 3 column layout are in 2 different divi containers.

You can see what the layout of the 2 and 3 columns look like here: https://playground.divisoup.com/2-3-and-4-column-square-blog-layout/

Here is the CSS I have:

 /*--------------------------------------------------------------------*/ /*-----Two, Three and Four Column Square Blog Layout by Divi Soup-----*/ /*--------------------------------------------------------------------*/ /***Global styles required for all layouts***/ /*This scales the images keeping the aspect ratio. NOTE: Object-fit is not supported in IE and Edge so if you want to use the standard image size remove this section*/ 
 
.ds-blog-square a img { width: 100%; object-fit: cover; } 
 
/*This section hides the excerpt*/ 
 
.ds-blog-square .post-content { display: none; } 
 
/*This section corrects some margin and padding issues*/ 
 
.ds-blog-square .et_pb_image_container { margin: -19px -19px 0; } 
 
.ds-blog-square h2 { margin: 0; padding: 0; } 
 
/*This section removes the bottom padding from the post and sets the position so we can move the title on top of the image*/ 
 
.ds-blog-square .et_pb_post { position: relative; padding-bottom: 0; border: none; } 
 
/*This section adds the semi transparent overlay and border on the image. It also sets the post title to absolute center*/ 
 
.ds-blog-square h2 a { position: absolute; top: 0; left: 0; height: 100%; width: 100%; padding: 40px; margin: 0; background: rgba(0, 0, 0, .3); color: #fff; text-align: center; outline: 2px solid #fff; outline-offset: -20px; display: flex !important; flex-direction: column; justify-content: center; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } 
 
/*This section changes the border and overlay colour and border position on hover*/ 
 
.ds-blog-square h2 a:hover { background: rgba(255, 255, 255, .5); color: #000; outline: 2px solid #000; outline-offset: 0; } 
 
 
 
/***2 Column Styles***/ 
/*This section changes the layout to 2 columns*/ 
 
@media only screen and ( min-width: 981px) { /*Two columns*/     
 
.ds-blog-two-column.et_pb_column_4_4 .et_pb_blog_grid[data-columns]::before { content: '2 .column.size-1of2' !important; } 
 
.ds-blog-square-two.et_pb_blog_grid .column { width: 47.25% !important; margin-right: 5.5%; } 
 
 
/*This removes the right margin from the last post on each row*/ 
 
.ds-blog-square-two.et_pb_blog_grid .column:nth-child(even) { margin-right: 0; } } 
 
 
/*This sets the spacing between post rows*/ 
 
.ds-blog-two-column .et_pb_post { margin-bottom: 12%; } 
 
/*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-two-column .ds-blog-square a img { height: 45vh !important; /*Adjust this value if you want the images taller or shorter*/ } 
 
@media only screen and (max-width: 1440px) { .ds-blog-two-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-two-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-two-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-two-column .ds-blog-square a img { height: 40vh !important; /*Adjust this value if you want the images taller or shorter*/ } } 
 
 
/***3 Column Styles***/ 
/*This sets the spacing between post rows*/ 
 
.ds-blog-three-column .et_pb_post { margin-bottom: 25%; } 
 
/*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: 45vh !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*/ } }[code]
 
 
 
Thanks
Jeff