Docs

[Seager]

Hello,

I have set my blog site to have image on the left and text on the right using this code:

@media (min-width: 768px) {
    body:not(.single-post) .has-post-thumbnail .entry-featured {
        float: left;
        width: 40%;
        box-shadow: none;
        border: none;
    }

    body:not(.single-post) .has-post-thumbnail .entry-wrap {
        float: left;
        width: 60%;
        padding: 0 0 0 40px;
    }

    body:not(.single-post) .has-post-thumbnail {
        overflow: hidden;
        background-color: #fff;
        padding: 60px;
    }

The problem is that in the categories and tags page I want to show them in columns of two just with the title, how can I achieve this?

[Rue Nel]

Hi There,

Thanks for writing in! To assist you with this issue, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[Seager]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating in!

Your image mouse hover issue is caused by a 3rd party plugin Pinterest Bookmarklet. Please try to disable this plugin and see how it behaves.

Do you want something like this?

If that is the case, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

@media (min-width: 768px){
  body:not(.single-post) .has-post-thumbnail .entry-footer {
    display: block;
    float: right;
    width: 60%;
    padding: 0 0 0 40px;
  }
}

Hope this helps. Kindly let us know.

[Seager]

Hello, thank you for your reply.

No, that’s what I have right now for the main homepage (just without the tags). What I want is in the CATEGORIES and TAGS page (when you click on them and go to a separate page) to be like this:

Can be just two or three columns and the text on the left. But this style, is it possible?

[Rad]

Hi there,

You have to change this

body:not(.single-post)

to thee

body:not(.single-post):not(.category):not(.archive):not(.search)

Your CSS targets all page except single post page. If you wish to exclude categories then you should modify your selector accordingly.

Thanks!

[Seager]

Like that it stays like this:

How can I fix the titles to be on the left and remove the text and tags on the bottom?

Thank you for the help. I’m not a developer, so I’m always reading here the forum for the answers and try to implement the best I can. 🙂

[Friech]

Hi There,

Just like Rad said, your code above will affect all the pages on your site except the individual post pages. The index blog page (homepage) will look nice with that code, but it will mess the others. So we need to update that code first to target only the blog index page.

/* Columnize Post with Featured Image*/
@media (min-width: 768px) {
    .blog .has-post-thumbnail .entry-featured {
        float: left;
        width: 40%;
        box-shadow: none;
        border: none;
    }

    .blog .has-post-thumbnail .entry-wrap {
        float: left;
        width: 60%;
        padding: 0 0 0 40px;
    }

    .blog .has-post-thumbnail {
        overflow: hidden;
        background-color: #fff;
        padding: 60px;
    }
    /*hide meta-data, except, and tags from the archive pages*/ 
    .archive .p-meta,
    .archive .excerpt,
    .archive .entry-footer {
    	display: none;
    }
}

See the block that I added, that is to hide to date, except, and tags from the archive pages (category & tags).

Then navigate to Appearance > Customize, under the Blog panel look for the Style option that is under the ARCHIVE (the second one). Then set that to Masonry and you should get the Columns option below (2 or 3 columns).

Let us know how it goes.

Cheers!

[Seager]

Thank you. That’s what I wanted! 🙂 I just have one last request:

1- Making this titles align on the left and with different style than the entry.title? Because if I change here it will change in all the post headings on the homepage as well.

2- Is it possible to add one more column?

[Paul R]

Hi,

1. You can add this under Custom > Edit Global CSS in the Customizer.

archive.category article.post . entry-wrap {
   padding-left:0;
}

2. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[Seager]

Tried but nothing changed. Keeps the same. And how to change the headings size just here?

EDIT: It works like this:

.category .post .entry-wrap {
   padding-left:0;
}

But about changing those specific headings style?

[Christopher]

Hi there,

Please add this code:

@media (max-width:979px){
.archive h2.entry-title a {
    font-size: 15px;
}
}

Hope it helps.

[Seager]

It works if I remove the first line “@media …” its suppose to?

[Nabeel A]

Hi again,

Then you can replace the previous code with this:

.archive h2.entry-title a {
    font-size: 15px !important;
}

Let us know how this goes!

[Seager]

It’s working fine, thank you!

I just can’t get to reduce the line height:

I tried line-height code, even with !important and nothing works.
Thank you for the support btw. 5* 🙂

[Author]

Posts