Second page layout

Activello
1

HI there,

I have a problem. This is my website: www.motivimi.cz.
If you scroll down and go on the second page, you can see that the layout is weird. There is only first post in grid. Any ideas?

Thank you.

2

Hey there,
I hope you’re doing well today

Go to Appearance > Customize > Activello Options > Layout
and ensure the first options “Two full width posts then half width posts” is selected.
Also clear your browser cache. Also please verify this issue is happening on another browser as well.

Best Regards,
Support

3

Hi,

the option is selected. On my homepage I wanted to have only one post “big” (full width) and the others smaller (half width). So I used this code. Maybe some problem with the code? Thank you

@media (min-width: 768px){

body.blog #main.page-1 article.post:nth-child(2) {
width: 50%;
float: left;
clear: left;
padding-right: 25px !important;
}

body.blog #main.page-1 article.post:nth-child(2) .post-inner-content{
border-bottom: 0;
margin-bottom: 0;
}

.blog.home #main article.post:nth-child(odd) {
clear: none;
padding-right: 0 !important;
padding-left: 25px !important;
}

.blog.home #main article.post:nth-child(2n+2) {
clear: left;
padding-right: 25px !important;
}
.blog.home #main article.post:nth-child(even) {
padding-left: 0 !important;
}
}

4

You can try resolving this issue by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

@media (min-width: 768px){
.home.blog.paged #main article.post:nth-child(2n+2) {
    clear: none;
    padding-left: 25px  !important;
    padding-right: 0  !important;
}
.home.blog.paged #main article.post:nth-child(odd) {
    clear: left;
    padding-left: 0  !important;
    padding-right: 25px  !important;
}
}
5

This works perfect! But now if I look on second page of my homepage I have this problem not at the first post and at the last one on the page. Attached screen shot.

www.motivimi.cz

6

That is not a problem, you have configured your home page to display 9 posts which is odd number so one image will be displayed alone.

7

Ok. but if I want to have first post full width and the others half width there will always be one extra if you know what I mean. I wonder maybe there is some code for that…?

8

Yes to achieve that please remove the above shared custom CSS code from your site and instead use the below custom CSS code.


@media (min-width: 768px){
.blog #main .article-container article.post:first-child {
    width: 100%;
}
}
9

It works! However now every page has first post full width. Is it possible to have it only on the first page and every other older post page has all the posts half width?

Thank you so much

10
Is it possible to have it only on the first page and every other older post page has all the posts half width?

Then you will again face the issue that you reported above so please decide what you want to achieve and then accordingly use above shared CSS code or not.