https://happysoulhungrymind.com/HWP/religion-versus-spirituality/
Hi on my page I am able to display the post title, categories, excerpt on the right of the image. However, I have not been able to display the post content on the right. Is there something about the content format that would prevent me from doing that.
Also, how do I remove the blank space around the left and right of the content? Thanks.
Hi Ravi,
Yes, the way you have structure it is incomplete. Using float left and right is not enough. You have to specifically set display and width of the content box. See this: https://screencast-o-matic.com/watch/cYn2Iowyq6
The following might help:
https://www.w3schools.com/cssref/pr_class_display.asp
https://www.w3schools.com/cssref/pr_dim_width.asp
Since content is inside a section area, you have to turn off GLOBAL CONTAINER under ROW settings:
Hope this helps.
Hi Lely: Thanks for your help. I was able to display the content to the right of the image on a big screen, however on smaller screens the content moves below the image and because we set the width to 50% it does not fill the space.
Is there a way where the content can wrap around the image, so some is on the right and then it fills the bottom 100% of the width.
When the screen is smaller, a portion of the title stays on the right and remaining moves below. How do I make sure the title is not split like that, either all on right or all on bottom - it should work like that for all screen sizes.
Thanks for your help.
https://happysoulhungrymind.com/HWP/religion-versus-spirituality/
Hello Ravi,
I have checked your page. Are you using a plugin in display the “Display Post Content”? As I have inspected the page, I found this custom css:
.display-posts-listing .title{
font-size:2em;
line-height:1em;
padding-top:0px;
padding-bottom:5px;
padding-left:0px;
padding-right:0px;
}
.display-posts-listing .excerpt{
font-size:14px;
font-style:normal;
display:block;
padding-left:0px;
padding-top:10px;
padding-bottom:10px;
}
.display-posts-listing .excerpt-dash{
display:none;
}
.display-posts-listing .title{
display:block;
}
.display-posts-listing .excerpt,.display-posts-listing .category,.display-posts-listing .excerpt a{
display:block;
}
.display-posts-listing.grid img{
height:auto;
padding-bottom:10px;
padding-top:10px;
}
@media (max-width:400px){
.display-posts-listing.grid.OneColumn{
grid-template-columns:repeat( 1,1fr );
}
.display-posts-listing.grid.OneColumn img{
max-width:100%;
min-width:100%;
}
}
@media (min-width:600px){
.display-posts-listing.grid.OneColumn{
grid-template-columns:repeat( 1,1fr );
}
}
@media (min-width:1024px){
.display-posts-listing.grid.OneColumn{
grid-template-columns:repeat( 1,1fr );
}
}
@media (min-width:600px){
.display-posts-listing.grid.TwoColumn{
grid-template-columns:repeat( 2,2fr );
}
}
@media (min-width:1024px){
.display-posts-listing.grid.TwoColumn{
grid-template-columns:repeat( 2,2fr );
}
.display-posts-listing.grid.TwoColumn img{
max-width:80%;
min-width:80%;
}
}
@media (min-width:600px){
.display-posts-listing.grid.ThreeColumn{
grid-template-columns:repeat( 2,2fr );
}
}
@media (min-width:1200px){
.display-posts-listing.grid.ThreeColumn{
grid-template-columns:repeat( 3,3fr );
}
.display-posts-listing.grid.ThreeColumn img{
max-width:100%;
min-width:100%;
}
}
.display-posts-listing.grid{
display:grid;
grid-gap:50px;
}
.display-posts-listing.grid.OneColumn{
grid-gap:50px;
}
.display-posts-listing.grid.ThreeColumn{
grid-gap:20px;
}
.display-posts-listing .listing-item{
overflow:hidden;
width:100%;
padding-top:0px;
border-left:0px solid #efefef;
border:0px solid #e9e9e9;
background-color:#ffffff;
margin:0px;
}
.display-posts-listing.OneColumn .listing-item{
overflow:hidden;
width:100%;
padding:0px;
border-right:0px solid #f5f5e9;
border-top:0px solid #f5f5e9;
border-left:0px solid #f5f5e9;
border-bottom:1px solid #e5e5e5;
background-color:#ffffff;
margin:0px;
}
.display-posts-listing .title,.display-posts-listing .category,.display-posts-listing .content,.display-posts-listing .excerpt{
padding-left:0px;
padding-right:0px;
}
.display-posts-listing.image-left .listing-item{
overflow:hidden;
margin-bottom:0px;
width:100%;
border-left:0px solid #f5f5e9;
}
@media (min-width:480px){
.display-posts-listing.image-left .image{
float:left;
margin:0px 25px 5px 0;
}
.display-posts-listing.image-left .listing-item .content{
min-width:40%;
margin:0 0 0 -20px;
}
}
.display-posts-listing.image-right .listing-item{
overflow:hidden;
margin-bottom:0px;
width:100%;
border-right:0px solid #f5f5e9;
}
@media (min-width:480px){
.display-posts-listing.image-right .image{
float:right;
margin:0px 0 5px 25px;
}
.display-posts-listing.image-right .listing-item .content{
float:none;
display:inline-block;
width:600px;
max-width:50%;
min-width:350px;
margin:0 0 0 -20px;
}
}
I would highly recommend that you contact the original creator of this code to correct the issue.
Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.
Regards.
Hi Runel:
This is X-Theme’s main weakness.
X-Theme is great for developing pages and posts. But when it comes to displaying the posts we are forced to chose from Essential Grid, The Grid, or in my case Display-Posts. After painstaking research I realized Display-Posts came closet to what I needed.
Working with these post-grid plugins and getting them right is a huge challenge if you are not an expert in css and php. X-Theme must include the functionality to display a customized collection of posts - and it already has the code - in your blog page - it is a inexcusable that X-theme does not make that available for web developers to use in a collection of their own posts.
How disappointing and what an incredible waste of time for novice developers like me to have learn and struggle with these plugins and their formatting issues in X-Theme.
Hello Ravi,
Each theme has it’s own design and features. Some of the features is made possible with the help of 3rd party bundled plugins. In your case, you have installed Display Post Content and that the custom css is causing an issue. Please understand that we are not familiar with this plugin. It is imperative that the creator of the plugin should be the one to be asked if an error or issue arise.
Thank you for you understanding.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.