• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

MG 1.1 Responsive thumbnail sizes

Triops

Well-known member
#1
I tried a lot but do not manage to have thumb sizes not too big and not too small on media index and albums index and category pages. I tried min-width, max-width, increasing items per row to 30 and other things, nothing worked as smooth as it should. Only the default setting with 3 thumbs per row work fluently - but that is not wanted, since they increase much too big with fluid width.
  • I use Xenith, with both: fixed and fluid width.
  • There should be something around 4-8 thumbs per row, 24 to 32 thumbs per page
  • Thumbs should never be smaller than 100-120px and not more than 160-200px width if resized for responsive resolutions
  • The sizes should increase/decrease fluently, as in the default settings, and not exceed or be smaller than mentioned limits
  • No row should have less thumbs, than the intended amount per rows - so all rows have to have the same amount of thumbs. Less would happen eg. if you set 6 or 7 thumbs per row but get to narrow to hold them in a row - so few thumbs will break into next row.
So, I assume, one simply need more responsive @media breaks.
Can somewone help with settings ans lines for EXTRA.css to achieve that, please?
 

Chris D

XenForo developer
Staff member
#2
The system as it stands has been improved in XF2 but aside from that the usual way to control the thumbnail size is just the items per row settings in style properties or custom CSS.

This is usually sufficient for most people.
 

Triops

Well-known member
#3
But can I add improvments with eg. additional @media resolutions in EXTRA.css? Just enough to have 1-2 more resolution steps just for media gallery thumb pages to not let become the thumbs too tiny or too big as it happens now. Would this be possible? And how could a CSS suggestion be, please?

XF2 is no option for me within the next year, as I migrate early comming week with XF1.5 ;)
 

Chris D

XenForo developer
Staff member
#4
The existing CSS is in xengallery_media_thumb_item.css and the existing media queries are at the bottom of that. There should be a few examples there to demonstrate how to add some additional breakpoints.