How to create custom search results and categories archive pages?

1. You need to add some separating space in Customizer > Layout > Container
2. You have this CSS:

.arc-image {
    width: 350px!important;
    height: 195px!important;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

which is added to the featured images, so the images won't go wider then 350px you need to change that.

Everything is done, except the width of the page. I want to make it something like this https://prnt.sc/qOXX1MgwYNQW

Page width should be contained, around 800px. Can it be done without custom CSS?

You can use a Layout Element:

https://docs.generatepress.com/article/layout-element-overview/

Hey, David! Thanks for your time and efforts in helping me in achieving my desired design.

I have added the layout and now I can control the page payout, which is amazing! But not in mobile view, I want to add the 10px padding on both sides in mobile view too.

Also, can I make the card equal even if the title is having a low word count? See this https://prnt.sc/fwUD4wsmNMJI

And what about the pagination? https://prnt.sc/CLDPKxUfSem-

GeneratePress has developed a lot and new features are amazing, I was not aware of them.

Thanks in advance.

Hi Ravi,

To set the content padding on mobile view, you can go to Appearance > Customize > Layout > Container, and set the view to mobile.

See: https://share.getcloudapp.com/YEuBnlNA

To make the cards equal and to fix the alignment of the navigation, maybe you could add a CSS like this:

article.dynamic-content-template .gb-container.archive-template {
    margin-bottom:auto;
    height:100%;
}

nav#nav-below .nav-links {
    display:flex;
    
}

Hope this helps! :)

The code you provided is working... But the container padding is not working, check this https://prnt.sc/-a59c7D6ymy3

Also, please help me in fixing the pagination https://prnt.sc/CLDPKxUfSem-

Edit your Layout Element - and make sure the Content Area is set to Default:

https://docs.generatepress.com/article/layout-element-overview/#content-1

This will keep the Customizer Padding

It is already set to default and I have added custom width 900px to make the width narrow, it was full-wdith earlier. https://prnt.sc/Pl5t8nifK6pd

If thats the case then the page will get its Padding from the Customizer > Layout > Container - theres a separate option for mobile.

If thats not working then try clearing/disabling any cache/optimization plugins and clear your browser cache

I tried it after clearing the cache, the container padding is only working on the archive title not on the grid https://prnt.sc/_S3v4iyMAASz

Can you share a link to that page ?

Shared the link in the private field.

Two options:

1. Edit the Block Element - Content Template and in the sidebar check the Keep Default Post Container. This will add the padding around the indiviudual posts.

OR

2. Add this CSS:

.generate-columns-container {
    padding: 0 20px;
}

I have used the CSS and it is working, however, the first option was also working but it was affecting the desktop view also.

Thanks for your time... You guys are amazing as always, thanks!

Glad to be of help!