Displaying single column of posts when viewing category page on mobile

Hi Craig,

I’d like to display the posts in a single column when viewing on a mobile device

That should be the default regardless what the desktop setting is.

Looks like you've added this CSS in Simple CSS which is causing the issue:

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

Can you try removing that?

Hi Leo,

I want to have a shadow border around the posts, is there a way I can retain that?

Maybe remove the width: 46%; line?

Or wrap your CSS in desktop only media query:
https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

Hi Leo,

Thanks for your response, it has helped, although I'm now struggling a bit with the padding between the blog posts and also the posts seem to have zero padding to the sides of the site/container?

I'm having a bit of a brain freeze at the moment but I just can't seem to sort this, I feel as though I'm missing something really obvious

Sorry for wasting time asking for help on this but any help is appreciated

Thanks,

Craig

Maybe go with the second option here?
https://generatepress.com/forums/topic/displaying-single-column-of-posts-when-viewing-category-page-on-mobile/#post-1788793

:-(

I tried that but the issue is that when I view the site on mobile, the shadow border disappears because it has went back to default.

I just want the posts to display exactly as it currently does on desktop with the shadow border etc. but when viewing on mobile it should display posts in single column rather than 2 columns

Anything further you could suggest?

What is your separating space option set at?
https://docs.generatepress.com/article/separating-space/

Can you make sure it's not 0?

The separating space is set to 40px

Content separator is set to 2em

Content layout is separate containers

Hmm ok.

Can you try checking the option to display padding around the featured image?

I believe it will work better in your case since the featured image aren't wide enough to fill the container anyways.

I have selecting this option but it doesn't seem to have made any difference

I will try messing around with some other settings

Hi Craig,

Are you aiming for something like this? https://share.getcloudapp.com/bLuA4yyb

If so, the quick CSS to achieve this is by simply adding this CSS:

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

What this does is, it basically forces the posts to stack on top of each other. You can keep the previous CSS you've added(box shadows etc), but if you want it to have a higher width, you may have to change the width: 46% to a higher value.

I tried the CSS provided but it didn't seem to make the posts stack one above another on mobile.

Is it possible that we've made this too complex?

All I want to achieve on the category page is the following:

- Add shadow border around posts
- Make edges round by adding 5px border
- Move "read more" link to bottom left hand corner of post card
- Make sure there is some space between the posts and the sides of the container
- Make posts display in a single column when viewing on mobile device

The CSS I've got in there at the moment appears to tackle the first 4 points, although I would like a bit more spacing at the left hand side of the website to the posts.

The last two is what I'm having difficulty with.

Super grateful for your guys help, I'm willing to try anything you could suggest.

This CSS now seems to be making the posts stack on top of each other on mobile.

I always make a habit of clearing my cache on the browser so I don't think it was that

Maybe it was the syntax error you pointed out on the other post which was causing issues.

Anyway, the issues I am left with now are:

The spacing around the posts isn't quite right

This CSS: width: 46%;

Appears to make the posts the right width when viewing on a desktop, but you are right, when viewing on a mobile it looks odd as it only takes up a small part of the screen.

Is there a way we can change the way this looks on mobile but not change the desktop width?

Also, I'd like to add more spacing to the side of posts on desktop. For some reason when viewing on desktop, the posts are hugging the left hand side of the screen??

Thanks

Craig

You can give the 46% width a media query, something like this:

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

And for mobile:

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