sitecase I updated this css code to fix the issue:
/* Fix bug Set Column */
/* Item Leading */
.blog-items.items-leading {
grid-gap: 1em;
display: grid;
grid-auto-flow: row;
grid-template-columns: 1fr;
margin-bottom: 24px !important;
width: 100%;
}
.blog-items.items-leading .blog-item {
align-items: center;
display: flex;
gap: 24px;
}
.blog-items.items-leading .blog-item .item-image,
.blog-items.items-leading .blog-item .item-image + .item-content {
width: 50%;
max-width: 50%;
}
@media screen and (max-width: 767px) {
.blog-items.items-leading .blog-item {
flex-direction: column;
}
.blog-items.items-leading .blog-item > * {
width: 100% !important;
max-width: 100% !important;
}
}
/* Blog Item */
.blog-featured .item-image,
.blog .item-image {
margin: 0 !important;
}
.blog-featured .item-image img,
.blog .item-image img {
width: 100%;
}
.blog-items {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media screen and (min-width: 768px) {
.blog-items[class*="columns-"],
.blog-items[class^="columns-"] {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 1200px) {
.blog-items.columns-2 {
grid-template-columns: repeat(2, 1fr);
}
.blog-items.columns-3 {
grid-template-columns: repeat(3, 1fr);
}
.blog-items.columns-4 {
grid-template-columns: repeat(4, 1fr);
}
.blog-items.columns-5 {
grid-template-columns: repeat(5, 1fr);
}
.blog-items.columns-6 {
grid-template-columns: repeat(6, 1fr);
}
.blog-items.columns-7 {
grid-template-columns: repeat(7, 1fr);
}
.blog-items.columns-8 {
grid-template-columns: repeat(8, 1fr);
}
.blog-items.columns-9 {
grid-template-columns: repeat(9, 1fr);
}
.blog-items.columns-10 {
grid-template-columns: repeat(10, 1fr);
}
}
.blog-items .blog-item {
margin: 0 !important;
width: 100%;
}
/* Layout Horizontal */
.blog-items[class*=" masonry-"] .blog-item,
.blog-items[class^="masonry-"] .blog-item {
align-items: center;
display: flex;
gap: 24px;
}
.blog-items[class*=" masonry-"] .blog-item .item-image,
.blog-items[class^="masonry-"] .blog-item .item-image,
.blog-items[class*="masonry-"] .blog-item .item-image + .item-content,
.blog-items[class^="masonry-"] .blog-item .item-image + .item-content {
width: 50%;
max-width: 50%;
}
@media screen and (max-width: 767px) {
.blog-items[class*=" masonry-"] .blog-item,
.blog-items[class^="masonry-"] .blog-item {
flex-direction: column;
}
.blog-items[class*=" masonry-"] .blog-item > *,
.blog-items[class^="masonry-"] .blog-item > * {
width: 100% !important;
max-width: 100% !important;
}
}
/* Layout Vertical */
.blog-items[class*=" columns-"] .blog-item,
.blog-items[class^="columns-"] .blog-item {
display: inline-flex;
flex-direction: column;
gap: 24px;
}
.blog-featured .w-100,
.blog .w-100 {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
gap: 12px;
margin-top: 24px;
}
@media screen and (max-width: 575px) {
.blog-featured .w-100,
.blog .w-100 {
align-items: center;
flex-direction: column-reverse;
}
}
.blog-featured .pagination__wrapper .pagination,
.blog-featured .counter,
.blog .pagination__wrapper .pagination,
.blog .counter {
padding: 0;
margin: 0;
}
.blog-featured .pagination,
.blog .pagination {
align-items: center;
display: flex;
}
.blog-featured .page-item,
.blog .page-item {
list-style-type: none;
}
.blog-featured .page-link,
.blog .page-link {
background-color: transparent;
}
ul.pagination .icon-angle-double-right::before {
display: inline-block;
content: '\f101';
font-family: FontAwesome;
font-weight: 400;
}
ul.pagination .icon-angle-double-left::before {
display: inline-block;
content: '\f100';
font-family: FontAwesome;
font-weight: 400;
}
Kindly check.