Monitor Reply

Support

Mobile Gallery Tiling

Permalink Browser Info Environment May 19, 2015 at 8:00 AM

Hi Emerii!

I have a question that I'm not sure falls under "support".
I am redoing a website for a client. I used your gallery here:
http://anjabetschart.ch/fotografie/landschaft/...
Done in 5.6, I think the theme was "Slate"
If you scale down the page, the tiles don't increase in size - they stay more or less the same.

My client likes the tiled effect, and would like to maintain the small tile size all the way down through viewport reduction. She feels that if the tiles are enlarged when the viewport is reduced,
the "gallery" feeling goes away. I agree.

Now as you can see in 5.7.4, using HiVis, when the viewport is reduced, suddenly the thumbnails become very large. You no longer have the chance to scan through them.
http://stagingbetschart.ch/index.php/portfolio/landschaft...
This happens somewhere around 1140px

My question is, how can I fix this? Is it Gallery ES or HiVis?
Could I turn off / change the mobile sizing somewhere?

Type:	Discussion
Status:	Resolved

emirii replied on May 19, 2015 at 9:39 am Permalink Reply

Hi Arlenesey,

Luckily this is an easy task, we can just override the CSS media queries to have our desired column count with the gallery rather than my preset very large tiles.

Just place this in the bottom of your theme CSS:

@media only screen and (max-width: 1050px) and (min-width: 651px) {
   /* Small Desktop / Large Tablet */
   div.ccm-page .galleryESbox {
      width: 10%;
      padding-bottom: 10%;
   }
   div.ccm-page .galleryESboxPortrait {
      width: 10%;
   }
}
@media only screen and (max-width: 650px) and (min-width: 481px) {
   /* Large Smartphone / Small Tablet */
   div.ccm-page .galleryESbox {
      width: 10%;
      padding-bottom: 10%;

Viewing 15 lines of 30 lines. View entire code block.

 
@media only screen and (max-width: 1050px) and (min-width: 651px) {
   /* Small Desktop / Large Tablet */
   div.ccm-page .galleryESbox {
      width: 10%;
      padding-bottom: 10%;
   }
   div.ccm-page .galleryESboxPortrait {
      width: 10%;
   }
}
@media only screen and (max-width: 650px) and (min-width: 481px) {
   /* Large Smartphone / Small Tablet */
   div.ccm-page .galleryESbox {
      width: 10%;
      padding-bottom: 10%;
   }
   div.ccm-page .galleryESboxPortrait {
      width: 10%;
   }
}       
@media only screen and (max-width: 480px) {
   /* Small Smartphone */
   div.ccm-page .galleryESbox {
      width: 10%;
      padding-bottom: 10%;
   }
   div.ccm-page .galleryESboxPortrait {
      width: 10%;
   }
}

You can replace all the width properties with the percentage how many columns you want to display. 10% is 10 columns, 33.3% is 3 columns, 25% is 4 columns, etc.

Let me know if you need anything else, thanks!!

arlenesey replied on May 19, 2015 at 9:46 am Permalink Reply

Thank you very much!
I will let you know how it goes.

arlenesey replied on May 19, 2015 at 10:00 am Permalink Reply

This is working wonderfully - I just need to tweak the percentages. Thank you.
Great resource to have on the forum.

GalleryES

Support

Mobile Gallery Tiling

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post