Displaying single column of posts when viewing category page on mobile

Thanks for your response, this is where my CSS is at:

.generate-columns.grid-50, .grid-sizer.grid-50 {
margin: auto;
box-shadow: 0 10px 10px rgb(0 0 0 / 10%);
margin-bottom: 30px;
border-radius: 5px;
}

@media (min-width: 769px) {
.generate-columns.grid-50, .grid-sizer.grid-50 {
width: 46%;
}
}

@media (max-width: 768px) {
generate-columns.grid-50, .grid-sizer.grid-50 {
width: 70%;
}
}

.generate-columns {
padding-left: 0px!important;
}

a.read-more {
display: block;
margin-top: 1em;
}

@media(max-width:768px) {
.generate-columns-container {
flex-direction: column;
}
}

When viewing as a mobile, the posts appear to be 100% width regardless of what I set the mobile width to.

Is there any further help you could offer?

I've edited CSS here, try it again :)
https://generatepress.com/forums/topic/displaying-single-column-of-posts-when-viewing-category-page-on-mobile/#post-1791512

Hi Ying,

This looks like it has done something, but not quite sorted it.

When viewing this page on a mbile device (link added privately) the blog post appears to be the full width of the page with no spacing.

Also, when viewing on a desktop, it has done something odd to the positioning of the text in the post cards. It's spaced over to the right. And very little spacing

I need a little bit of space at the sides and top/bottom of each post.

Here is my CSS as it stands, I may have missed something obvious but I'd appreciate it if you could take another look?

.generate-columns.grid-50, .grid-sizer.grid-50 {
margin: auto;
box-shadow: 0 10px 10px rgb(0 0 0 / 10%);
margin-bottom: 30px;
border-radius: 5px;
}

@media (min-width: 769px) {
.generate-columns.grid-50, .grid-sizer.grid-50 {
width: 46%;
}
}

@media (max-width: 768px) {
.site .generate-columns.mobile-grid-100, .grid-sizer.mobile-grid-100{
width: 70%;
}

.generate-columns {
padding-left: 0px!important;
}

a.read-more {
display: block;
margin-top: 1em;
}

@media(max-width:768px) {
.generate-columns-container {
flex-direction: column;
}
}

Actually here is the latest CSS. I wound it back a bit as we were starting to cause new issues that weren't there before:

.generate-columns.grid-50, .grid-sizer.grid-50 {
margin: auto;
box-shadow: 0 10px 10px rgb(0 0 0 / 10%);
margin-bottom: 30px;
border-radius: 5px;
}

@media (min-width: 769px) {
.generate-columns.grid-50, .grid-sizer.grid-50 {
width: 46%;
}
}

.generate-columns {
padding-left: 0px!important;
}

a.read-more {
display: block;
margin-top: 1em;
}
@media(max-width:768px) {
.generate-columns-container {
flex-direction: column;
}

The only issues I have from here are:

- Regardless of viewport, there is not enough/no spacing between the posts and the container/other posts
- There doesn't appear to be a shadow border at the top of each post. There is a border at the sides and bottom

Hi there,

might be best to start over as opposed to trying to work around whats there so far.
Remove all of this:

div.post-image {
    margin-bottom: 1em !important;
}

div.entry-summary {
    margin-top: 1em !important;
}

.generate-columns.grid-50,
.grid-sizer.grid-50 {
    margin: auto;
    /* box-shadow: 0 10px 10px rgb(0 0 0 / 10%); */
    margin-bottom: 45px;
    border-radius: 5px;
    box-shadow: 1px 3px 14px -3px #000000;
}

a.read-more {
    display: block;
    margin-top: 1em;
    text-align: left;
}

@media only screen and (min-width: 575px) {
    .generate-columns .inside-article {
        margin-bottom: 20px;
    }
}

then add this:

.generate-columns .inside-article {
    overflow: hidden;
    box-shadow: 1px 3px 14px -3px #000000;
    border-radius: 5px;
}

.generate-columns.resize-featured-image .post-image img {
    width: 100%;
}

a.read-more {
    display: block;
    margin-top: 1em;
    text-align: left;
}

For the spacing between image - title - summary - you can reduce the Content Separator in Customizer > Layout > Container.

Hi David,

One shot one kill!

The only thing still not looking the way I'd like to is the spacing to the left and right of the posts when viewing on mobile - the posts are the full width of the screen where I'd like a bit of space on either side

There's vertical space, just nothing horizontal, and that's the final thing I need

Add this CSS:

@media (max-width: 768px) {
    .generate-columns-container .post.generate-columns {
        margin-left: 20px;
        margin-right: 20px;
    }
}

BOOM

Thanks David

You're welcome