How to make top 10 Holizontally?

Ajay, thank you for your reply.
Okay, it will take a time, but I will keep working and learn step by step how to register image, and edit sidebar/theme by myself.

Thanks again for your help.
I am currently satisfied with small thumbnails in the sidebar.

For anyone who are looking for how to put top 10 holizontally, I hope this posts will help you too.

Thanks again.

Thanks Teddy ??

I have the same question. I want to implement Top 10 on my site (seeuncharted.com) using only 3 thumbnails of 320px each. I’m able to get the thumbnails to display, but they are always left justified. I’m not familiar with the ‘ .tptn_horizontal .tptn_posts ul {‘ element. I tried using it but does not work for me.

Here is the code I’m currently using:

.tptn_posts_daily ul li, .tptn_posts ul li {
display:inline;
height:320px;
list-style:none;
margin-bottom:10px;
padding: 0px 15px 0px 15px !important;
}

i’m also concerned about how center justification will affect the display on a mobile device. Any assistance is appreciated.

Hi,

You can try the below, but it doesn’t always result in the centering because the main issue is that the width of your thumbnails + spacing needs to match exactly with the width of your content.

.tptn_posts_daily ul, .tptn_posts ul {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 1060px;

Thanks for your reply. I tried your code, but the thumbnails display horizontally instead of vertically.

I modified my original code (posted above) with your margin-left / right parameters, max-width, and removed the spacing. There still is no change in the positioning in the thumbnails.

When I inspect the element, it reports a width of 1170px, which corresponds to the grid above. I tried adjusting max-width to this dimension, but everything is left justified still.

Any other suggestions? It’s not bad with the way it was. I was just hoping to have it centered if there is any way possible.

Thanks again.

Hi, I’m confused. I was under the assumption you wanted to display it all horizontally?

What happens if you use width instead of max-width?

Yes, I did. The code you presented made the images display vertically.

I resolved the issue by going with 5 tiles that span the width of the page.

Thanks for your reply and help.

Your welcome ??

Hello Ajay:

I’m revisiting this again. I’m running a Responsive theme on my website.

The Top 10 ‘Style’ attribute utilizes the custom thumbnail image dimensions. Is there a way to override this?

For example, if I specify custom thumbnail dimensions of 375px, but the browser window only accommodates for images up to 335 px, shouldn’t the CSS resize the image according to size of the browser window.

In one of your previous replies, you proposed the following:

.tptn_posts_daily ul, .tptn_posts ul {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 1060px;

Is the ‘max-width: 1060px;’ accounting for the width of the container or the image size? Based on the Top 10 ‘Style’ attribute setting, this seems to account for the thumbnail size, not the container, unless I am mistaken.

Any information is very much appreciated.

Thanks.

max-width is the used to set the maximum width of the element i.e. the ul. It’s independent of the container.

To limit to the container, you’d do something like max-width: 100%

https://css-tricks.com/almanac/properties/m/max-width/

Thanks Webber. I understand now. I’ll make the change to max-width.

Regards.

You’re welcome.