Recent post Classic Raw Content

[fra_fantasy]

I changed the size of the site:

Before: 900 max width
Now: 1170 max width

In this page http://www.labottegalab.com/arte/spazio-espositivo/ the recent post, all images are of different sizes and not in columns (two columns posts) and the column is not centered.

This is the text code to show everyone recent post:

[x_recent_posts type="post" count="-1" offset="0" category="EXHIBITIONS" orientation="horizontal"]

This css code has stopped working:

/*
Spazio espositivo
*/

.x-recent-posts .type-post {
  max-width: 430px !important;
}

.x-recent-posts a:nth-child(2n) {
  margin-right: 0;
}

@media (max-width: 767px) {
  .page-id-178 a.x-recent-post-1 {
    margin-bottom: 4%;
    margin-right: 0;
  }
}

.x-recent-posts .x-recent-posts-img {
  margin-top: 85px;
}

thanks!!!

[kory]

Howdy @fra_fantasy,

Thanks for writing in! There are a couple of things you’ll want to make sure to adjust:

First, if you haven’t reviewed our online documented examples of how to use the shortcodes, you will want to check that out here: http://demo.theme.co/integrity-1/shortcodes/recent-posts/. As you can see, the only valid values for the count parameter are 1, 2, 3 and 4. These not only output the amount of posts desired, but are also used to output the proper classes used to style the shortcode correctly. The first thing I would do is completely remove your custom CSS and input a proper value for the count parameter and start there. You should find that your shortcode will look great and respond properly with nothing else to do. From there, you can make adjustments as you see fit, but I would personally recommend avoiding any of the responsive styles such as removing side margins from the items, as those change depending on the number of posts you use.

Second, if the look you’re trying to go for is a list of posts vertically and having that centered on your page, you can do that easily by changing the orientation parameter’s value to vertical, which will layout your items vertically as opposed to horizontally, and then using the following CSS (using whatever additional custom class you want):

.x-recent-posts.custom-class {
  max-width: 500px; /* change this to whatever you want */
  margin-left: auto;
  margin-right: auto;
}

Third, I see that you have a custom class of .the-class added to your Raw Content Element, but you have included the . before the class name. This is invalid syntax, and this class will not take effect on your Element because of it. When adding classes to an element, just add the class name (e.g. the-class in this case). When you are styling a class, that is when you will use the dot syntax to target the element (e.g. .the-class) as the dot represents a class in CSS.

Fourth, while you can certainly use a Raw Content Element to hand write in a shortcode, you can also choose to just drag in the “Classic Recent Posts” Element into your content and style it from there. This is more tightly integrated and will give you a simpler interface to work with. You should be able to do everything you’re trying to do with simpler markup and a simpler layout because of this. Just something to think about as you move forward with any customizations.

Hopefully that helps to point you in the right direction, cheers!

[fra_fantasy]

thank you so much!

the main problem is to view all category posts.

The only automated solution to see everything was like that.
Are there any other solutions?

[jade]

Hi there,

It seems that the main issue of your display is the alignment.

Please try to add this code in the Global CSS:

.x-recent-posts a:nth-child(2n+1) {
    clear: both;
}

You can find more information about the clear property here:

https://www.w3schools.com/cssref/pr_class_clear.asp

Hope this helps.

[fra_fantasy]

At the moment it is still not centered.

I can not find the right combination.

can you help me?
Thanks!

.x-recent-posts a:nth-child(2n){

margin-left: auto;
margin-right: auto;
}

.x-recent-posts a:nth-child(2n+1) {
clear: both;

}

/*
Spazio espositivo
*/
.x-recent-posts .type-post {
max-width: 430px !important;
}

@media (max-width: 767px){
.page-id-178 a.x-recent-post-1 {
margin-bottom: 4%;
margin-right: 0;
}
}
.x-recent-posts .x-recent-posts-img {
margin-top: 85px;

}

[jade]

Hi there,

Please remove this block of code:

.x-recent-posts .type-post {
  max-width: 430px !important;
}

Then you may set the width of each recent post item to 48% with a 4% right margin but 0 for the even placed recent post items. These codes should do it:

@media (min-width: 768px) {
    .the-class .x-recent-posts a {
        width: 48%;
    }
}

Once you’ve done the two steps above, you will have the recent post items display in two columns but will be quite large because there will be two recent post items that will be displayed every row that will fill 48% of each row.

Now, to change the size of the recent post items, we can set a maximum with to the raw content element then add an auto value to the left and right margin to center it. Since you added the class the-class to the raw content element, we can use it to reference it. The code should be:

.the-class {
    max-width: 980px;
    margin: 0 auto;
}

Feel free to change the value of the max-width property to what you prefer.

Please do note though that since this is not how the recent post element is natively setup, this hack might break in future updates and it will be your responsibility to update it and this falls into custom development.

Hope this helps.

[fra_fantasy]

thank you very much!! :rilassato:

[fra_fantasy]

I’ll have this size even in recent posts how can I do?

[ruenel]

Hello There,

The recent posts width is only 48% of the 980px container width which is the raw content element or the-class element. Which one do you want to increase the size?

Thanks.