Docs

[Luz]

Hi Theme.co staff: I’m trying to design a new home with some recent posts by categories. The problem is that featured images are shown too big on mobile. So I tried to figure out some CSS for my customizer, but still need your advice.

This is the code I placed

@media(max-width: 780px){ 
.x-recent-posts .x-recent-posts-img {
   float: left;
   height: 120px;
   padding-bottom: 0;
   width: 160px; }
  .x-recent-posts .x-recent-posts-content {
margin-left: 10px;
}
.x-recent-posts.x-recent-posts-excerpt {
margin-left: 10px;
line-height: 1.3em;
 }
} 

I’ll attach before-after screenshots (as well as URL and access) in the following private message so you can see how far did I get. 🙂

Thanks in advance for your help always.

WP Version: 4.7.1
X Version: 4.6.4 (Ethos child theme)
CS Version 1.3.3

[Luz]

This reply has been marked as private.

[Prasant Rai]

Hello There,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

a.entry-thumb {
    padding-bottom: 50%;
}

Thanks.

[Luz]

This reply has been marked as private.

[Luz]

Thank you, Prasant Rai.

In addition, if possible, I’d also like to know how to

1) Delete border from recent posts
2) Add a vertical line to separate horizontal posts
3) Enlarge the size of the headline
4) Delete date of posts

Thanks for your suggestions!

[Christopher]

Hi there,

Please provide us with URL of page in question.

Thanks.

[Luz]

This reply has been marked as private.

[Christopher]

Hi there,

Provided URL shows 404 error, please check.
Provided credentials didn’t work either.

Thanks.

[Luz]

Thank you Christopher. The URL is still under construction, so you won’t be able to see it unless you login.
About credentials, I don’t know what happened, I use the same ones all the time. I’ll change user password for you. Thank you.

[Luz]

This reply has been marked as private.

[Rad]

Hi there,

Would you like them to stay in columns in mobile too? The reason it’s not looking good is the actual uploaded image is small http://www.tangauta.net/wp-content/uploads/Tango-DeLuxe.jpg

If you’re intentionally uploading small images because of the suggestion from optimization tools or site, then that’s what happen. Their suggestions are based on what they see, and not what devices see. Example, if they see the image is displayed on 300×300 container, then they would suggest to compress and resize your 900×900 image to 300×300. The problem is, what if it’s displayed on mobile, tablets, or any retina device. An average mobile size is 767px, hence, if you display a 300×300 image then quality is poorly rendered. Now imagine displaying it on retina display where the size requirement is doubled.

The solution is to force them in columns in mobile or upload the bigger image, at least 967px to cover both tablet and mobile. What do you prefer?

And please add this CSS

1. Remove border

.x-recent-posts a {
border: 0px !important;
}

2. Vertical line

  .x-recent-posts a {
  position: relative;
  overflow: visible;
  }
  .x-recent-posts a:after {
  content: "";
    display: block;
    position: absolute;
    right: -10px;
    bottom: 0px;
    border-right: 1px solid #ccc;
    width: 1px;
    top: 0;
  }
  .x-recent-posts a:last-child:after {
display: none;
}

3. Headline size

.x-recent-posts .h-recent-posts {
    font-size: calc(13px + 1.2vw);
}

4. Remove date

.x-recent-posts .x-recent-posts-date {
display: none;
}

Hope these helps.

[Luz]

Thank you very much for your detailed and useful message, Rad!!

Indeed, that image is too small… while many others are big! Unfortunately there’s nothing we can do about it.

But aside from original sizes, what I don’t like on my site is the fact that the mobile-user has to scroll down a lot to find what else can he/she enjoy… assuming that he/she knows that we publish lots of content. I think that’s not a nice experience for users at all.

So, I tried to solve it by adding some extra Appearance>Customizer>CSS to re-arrange Recent posts tablet/mobile view. You’ll find the piece of code I added in my first message above and, as you can see in the screenshots I first shared in private reply, “my” code is far from being perfect.

The idea: to show a smaller featured image floating left with headline and excerpt on its right. I thought it’d be a good solution, or perhaps you would like to suggest a better one.

So, can you improve that CSS code (padding around image, padding around text, line-height for excerpt, etc…) and/or provide a better suggestion for this issue?

I’d really appreciate your help. Thanks in advance!

PS: Regarding the other issues (1, 2, 3 and 4), I’ve tried all the codes you provided, Rad. They work! So thank you very much again!

[Rue Nel]

Hello There,

Thanks for updating in! For your recent post items look in smaller devices, please make use of this code instead:

@media(max-width: 780px){ 
  .x-recent-posts .x-recent-posts-img {
   float: left;
   height: 120px;
   padding-bottom: 0;
   margin-top: 10px;
   margin-right: 10px;
   width: 160px;
  }

  .x-recent-posts .x-recent-posts-excerpt {
    line-height: 1.1em;
    font-size: 95%;
  }
} 

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

[Luz]

Thank you very much, Rue! I added the code you provided above I made a little adjustment (I’d like smaller line-height for excerpts on any device) and I also added a piece of code Rad suggested before.

It partially worked. Line-height and bottom padding on smaller devices (when excerpts are shorter) needs still some help.

This is the code I added

/* RECENT POSTS – Headings */
.x-recent-posts .h-recent-posts {
     font-size: calc(9px + 1.2vw); }

/* RECENT POSTS – Excerpt */
  .x-recent-posts .x-recent-posts-excerpt {
    line-height: 1.1em;
    font-size: 95%;
  }

/* RECENT POSTS – Mobile view */
@media(max-width: 780px){ 
  .x-recent-posts .x-recent-posts-img {
   float: left;
   height: 120px;
   padding-bottom: 0;
   margin-top: 10px;
   margin-right: 10px;
   width: 160px;
  }

}	

You’ll find how it looks like in the attached screenshots (before, after and after mobile). Three recent posts in a row plus sidebar is too much now, I’ll change that soon, but I guess it’s still useful to illustrate my point.

Thanks in advance again! 🙂

[Rad]

Hi there,

That’s quite tricky, you’ve been using recent posts all over the area, and each one has different heights. How about using Essential grid?

It can be fixed, but again, it may change in the future depending on the content being displayed. You’ll be fixing it over and over. For the meantime, please add this as well,

@media ( min-width: 768px ) and ( max-width: 1024px ) {
.my_custom_recent_columns.x-recent-posts .x-recent-posts-content {
    padding: 10px 5px;
    min-height: 300px;
}
}

Then add the my_custom_recent_columns to your recent posts’ Class input. We have to do this, as there is no identification of which recent posts we’re applying this. They are all added on same section, hence they can’t be selected by section.

And for this https://s3.amazonaws.com/community-themeco/app/uploads/2017/01/22102401/RP-After-Mobile-128×72.png, just change this <strong>margin-top: 10px;</strong> to zero or lower.

Thanks!

[Author]

Posts