*

mwindey

  • *****
  • 475 posts
Show 3 images instead of 2 - qq Uploader
« on: December 04, 2023, 11:21:46 AM »
Hello everyone, I could use some help again....
When uploading images, they are always displayed in rows of 2, leaving room to display a third image in the div. I searched in style.css at qq uploader but did not immediately see the solution. Someone who has already adjusted this or could MB Themes point me in the right direction please. Thank you in advance...

*

MB Themes

Re: Show 3 images instead of 2 - qq Uploader
« Reply #1 on: December 04, 2023, 03:42:29 PM »
maybe just not enough space
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots

Marked as best answer by frosticek on December 05, 2023, 10:49:31 AM
*

mwindey

  • *****
  • 475 posts
Re: Show 3 images instead of 2 - qq Uploader
« Reply #2 on: December 04, 2023, 05:25:30 PM »
Fixed  :D

style.css line:
Code: [Select]
.upload-photos .qq-upload-list {display:inline-block;width:60%;clear:both;position:relative;z-index:3;padding-top:10px;}changed width to 100%

line:
Code: [Select]
.upload-photos .qq-upload-list li {border:1px solid #c0c0c0;box-shadow:0 2px 5px rgba(0,0,0,0.1);font-size:13px;position:relative;float: left; width: calc(50% - 8px); margin:8px 16px 8px 0; border-radius: 5px; background: #fff;padding:12px;min-height:160px;}changed width: calc to 32%

On mobile this looks to small so i added a few lines to responsive.css:

Code: [Select]
@media screen and (max-width: 767px) {
.upload-photos .qq-upload-list {display:inline-block;width:100%;clear:both;position:relative;z-index:3;padding-top:10px;}
.upload-photos .qq-upload-list li {border:1px solid #c0c0c0;box-shadow:0 2px 5px rgba(0,0,0,0.1);font-size:13px;position:relative;float: left; width: calc(50% - 8px); margin:8px 16px 8px 0; border-radius: 5px; background: #fff;padding:12px;min-height:160px;}
Result attached...
« Last Edit: December 04, 2023, 06:35:23 PM by mwindey »

*

MB Themes

Re: Show 3 images instead of 2 - qq Uploader
« Reply #3 on: December 05, 2023, 10:49:36 AM »
Cool ;)
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots