Styling of recents post on tag page

Support
#1

Hi,

I have a problem with the styling of recent post on my tag pages:

You can see that the images are very smal and doesn´t look like on the mainpage:

Can you please help me with this styling?

Attached you can see the code I have added to my functions.php

Michael

#2

Hi Michael,

Thanks for reaching out.

Do you mean the size should be exactly the same? Because I compared and the aspect ratio is the same, and the image is exactly the same with just different sizes because of the container, and it responds.

Please add this CSS to your Theme Options > CSS change its size

@media ( min-width: 980px ) {
.blog .x-main .hentry>.entry-featured, .search .x-main .hentry>.entry-featured, .archive .x-main .hentry>.entry-featured {
    width: 34%;
}
.blog .x-main .hentry.has-post-thumbnail>.entry-wrap, .search .x-main .hentry.has-post-thumbnail>.entry-wrap, .archive .x-main .hentry.has-post-thumbnail>.entry-wrap {
    width: 66%;
}
}

The 34% is for the image while 66% is for the content. If you increase a value then make sure to decrease the other one. The total should be 100%, example, 40% and 60%.

With responsive layout, the image size is controlled by its layout dimension. The only way to change it is by changing the container’s size.

And with the existing custom CSS in your site, then I think you’ll able to enhance and customize the given CSS further :slight_smile:

Thanks!

#3

Hi,

thank you for your answer. What i mean is that the thumbnails from the recent posts are very small (183x125) at the moment - but there is enough white space on the row.

So when I have 3 recent posts in a row they should all use 33% of the space from x-main left.

When I add your code to CSS I didn´t get the effekt I need, because it also rezises the entry-thumb on top of the page. And why is there a small grey border on top on bottom of the recent posts? This border I can´t find on the recent posts on my mainpage.

Did you know what I mean?

Michael

#4

Hello Michael,

The recent posts element were affected by your custom css because you have added this:

.x-main .hentry.has-post-thumbnail>.entry-wrap {
    float: right;
    width: 66%;
    padding-left: 35px;
}

To resolve this, you will need to add this following code to make sure that the recent posts element will have its default settings:

.x-main .x-recent-posts .entry-wrap {
    float: none !important;
    width: 100% !important;
    padding-left: 0px !important;
}

We would loved to know if this has work for you.

#5

I have checked my extra CSS code and I can´t find this custom css… Are you shure I have added this manually? I have added your code to my css and now it looks fine.

But one more question:

There is a small grey border line on top and bottom of each recent post. I can delete it via extra css. The normal recent posts on the mainpage and in every post doesn´t have this grey line. So my question is, where does this grey line come from and why is it only displayed here?

Michael

#6

Hey Michael,

It’s because Ethos has that border for posts in an archive page so it includes the Recent Post articles in those pages too.

You will need to override this with CSS.

Thanks.

#7

Hi,

can you please help me to adjust the CSS code?

When I use

.archive .x-main .hentry {border-bottom:0px; padding-top: 0px;}
.archive .x-main .hentry:last-of-type {border-bottom:0px; padding-bottom: 0px;}

the CSS also has effect on the entry-thumb on top of the post.
I just want to restyle the recent posts on tag pages.

Michael

#8

Hi Michael,

Please try this code instead:

.tag .x-main .x-recent-posts article {
    border: 0 !important;
    padding: 5px !important;
}

Hope this helps.

#9

That´s it. Perfect, thank you!

#10

Glad we could help.

Cheers!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.