Thumbnails resizing

[Kvslover]

How can I change or resize thumbnails  to small or make them like how xhamster.com thumbnails look ?

[Tech Support]

This is very abstract question. The size of thumbnails has 2 parts:

• The actual size of image files, but default it is 320x180
• The display size of how the image file is expanded or collapsed in adaptive layout. Based on device dimensions this size will be different for different devices.

In general it is not possible to provide a simple answer for "how". You need strong CSS coding experience to do that.

I can only tell the places.

This is the main CSS style of video thumbs (and many other type of thumbs, they share the same style):

.list-playlists .item,
.list-models .item,
.list-sponsors .item,
.list-channels .item,
.list-categories .item,
.list-albums .item,
.list-albums-images .item,
.list-videos .item,
.list-videos-screenshots .item {
  display: inline-block;
  text-align: left;
  background: transparent;
  vertical-align: top;
  cursor: pointer;
  margin: 10px 0 0 10px;
  width: calc(25% - 10px);
  cursor: pointer;
  -webkit-box-shadow: -1px 1px 5px rgba(207, 207, 207, 0.65);
  box-shadow: -1px 1px 5px rgba(207, 207, 207, 0.65);
  border-radius: 0 0 5px 5px;
  background-color: #ffffff;
}

This style means 4 thumbs per row (width: calc(25% - 10px)).

 

Then when sidebar is present, the number of video thumbs is reduced to 3 per row:

.sidebar + .main-container .list-videos .item {
  width: calc(33.33% - 10px);
}

 

Then adaptive layout for devices with different sizes:

@media screen and (max-width: 1255px) {
  .sidebar + .main-container .list-playlists .item,
  .sidebar + .main-container .list-videos .item {
    width: calc(25% - 10px);
  }
}

@media screen and (max-width: 860px) {
  .sidebar + .main-container .list-albums .place ~ .item:nth-of-type(-n + 7),
  .list-albums .item,
  .member-menu + .main-container-user .list-albums .item,
  .member-menu + .main-container-user .list-channels .item,
  .member-menu + .main-container-user .list-members .item,
  .sidebar + .main-container .list-videos .item,
  .sidebar + .main-container .place ~ .item:nth-of-type(-n + 7),
  .place ~ .item:nth-of-type(-n + 7),
  .list-playlists .item,
  .list-videos .item {
    width: calc(33.33% - 10px);
  }
}

@media screen and (max-width: 640px) {
  .sidebar + .main-container .list-albums .place ~ .item:nth-of-type(-n + 7),
  .list-albums .item,
  .member-menu + .main-container-user .list-albums .item,
  .member-menu + .main-container-user .list-channels .item,
  .member-menu + .main-container-user .list-members .item,
  .sidebar + .main-container .list-videos .item,
  .sidebar + .main-container .place ~ .item:nth-of-type(-n + 7),
  .place ~ .item:nth-of-type(-n + 7),
  .list-playlists .item,
  .list-videos .item {
    width: calc(50% - 10px);
  }
}

@media screen and (max-width: 420px) {
  .sidebar + .main-container .list-videos .item,
  .sidebar + .main-container .place ~ .item:nth-of-type(-n+7),
  .place ~ .item:nth-of-type(-n+7),
  .member-menu + .main-container-user .list-videos .item,
  .member-menu + .main-container-user .list-playlists .item,
  .list-playlists .item,
  .list-videos .item {
    width: calc(100% - 5px);
    margin: 5px 0 0 5px;
  }
}

 

So the main thing is that you adjust the width percentage of a thumb item for different device dimensions and different layout conditions (have sidebar or not, for example).

[Kvslover]

Please kindly let the developers help me make this change and let me buy you some pizza? 🙏

[Kvslover]

8 hours ago, Tech Support said:

This is very abstract question. The size of thumbnails has 2 parts:

• The actual size of image files, but default it is 320x180
• The display size of how the image file is expanded or collapsed in adaptive layout. Based on device dimensions this size will be different for different devices.

In general it is not possible to provide a simple answer for "how". You need strong CSS coding experience to do that.

I can only tell the places.

This is the main CSS style of video thumbs (and many other type of thumbs, they share the same style):

.list-playlists .item,
.list-models .item,
.list-sponsors .item,
.list-channels .item,
.list-categories .item,
.list-albums .item,
.list-albums-images .item,
.list-videos .item,
.list-videos-screenshots .item {
  display: inline-block;
  text-align: left;
  background: transparent;
  vertical-align: top;
  cursor: pointer;
  margin: 10px 0 0 10px;
  width: calc(25% - 10px);
  cursor: pointer;
  -webkit-box-shadow: -1px 1px 5px rgba(207, 207, 207, 0.65);
  box-shadow: -1px 1px 5px rgba(207, 207, 207, 0.65);
  border-radius: 0 0 5px 5px;
  background-color: #ffffff;
}

This style means 4 thumbs per row (width: calc(25% - 10px)).

 

Then when sidebar is present, the number of video thumbs is reduced to 3 per row:

.sidebar + .main-container .list-videos .item {
  width: calc(33.33% - 10px);
}

 

Then adaptive layout for devices with different sizes:

@media screen and (max-width: 1255px) {
  .sidebar + .main-container .list-playlists .item,
  .sidebar + .main-container .list-videos .item {
    width: calc(25% - 10px);
  }
}

@media screen and (max-width: 860px) {
  .sidebar + .main-container .list-albums .place ~ .item:nth-of-type(-n + 7),
  .list-albums .item,
  .member-menu + .main-container-user .list-albums .item,
  .member-menu + .main-container-user .list-channels .item,
  .member-menu + .main-container-user .list-members .item,
  .sidebar + .main-container .list-videos .item,
  .sidebar + .main-container .place ~ .item:nth-of-type(-n + 7),
  .place ~ .item:nth-of-type(-n + 7),
  .list-playlists .item,
  .list-videos .item {
    width: calc(33.33% - 10px);
  }
}

@media screen and (max-width: 640px) {
  .sidebar + .main-container .list-albums .place ~ .item:nth-of-type(-n + 7),
  .list-albums .item,
  .member-menu + .main-container-user .list-albums .item,
  .member-menu + .main-container-user .list-channels .item,
  .member-menu + .main-container-user .list-members .item,
  .sidebar + .main-container .list-videos .item,
  .sidebar + .main-container .place ~ .item:nth-of-type(-n + 7),
  .place ~ .item:nth-of-type(-n + 7),
  .list-playlists .item,
  .list-videos .item {
    width: calc(50% - 10px);
  }
}

@media screen and (max-width: 420px) {
  .sidebar + .main-container .list-videos .item,
  .sidebar + .main-container .place ~ .item:nth-of-type(-n+7),
  .place ~ .item:nth-of-type(-n+7),
  .member-menu + .main-container-user .list-videos .item,
  .member-menu + .main-container-user .list-playlists .item,
  .list-playlists .item,
  .list-videos .item {
    width: calc(100% - 5px);
    margin: 5px 0 0 5px;
  }
}

 

So the main thing is that you adjust the width percentage of a thumb item for different device dimensions and different layout conditions (have sidebar or not, for example).

Please I have no good idea about CSS coding. Kindly help me make this change and let me know if there is a price behind it.

Than you

[Tech Support]

We do not have CSS coders / designers in our team, so please hire a 3rd-party CSS developer for this.

[Kvslover]

Please can you kindly recommend any good css developer for me? This has to be done by trusted and identifiable person.

try help me 

[Tech Support]

We don't have CSS developers in our team, so can't recommend anyone.

[hbarnetworks]

19 hours ago, Kvslover said:

Please can you kindly recommend any good css developer for me? This has to be done by trusted and identifiable person.

try help me 

I can vouch for there guys, Did and still do terrific work for me.

 

[Kvslover]

6 hours ago, hbarnetworks said:

I can vouch for there guys, Did and still do terrific work for me.

 

Thank you 🙏