gallery disappears on mobile!!!

Site URL: https://corn-apricot-zn88.squarespace.com/

My gallery disappears on one page: the people page in anything that is under 1024px width. I have it set so it shouls show 2 columns in tablet and none show. 

HELP!!!!  I am wondering if I did something in the code, but I don't see anything. 

It appears the problem is in this area of your CSS.

.sqs-gallery-design-autogrid .sqs-gallery-meta-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center !important;
    padding: 0 10%;
    position: absolute;
    top: 0;
    pointer-events: auto;
    -webkit-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
    width: 100%
}

The issue is that at some break points around the 770px point. The width of the summary items go to 0px.

It appears to me that there are a couple of CSS techniques being used to try and achieve the end effect. Perhaps there are conflicts with these different methods.

I don't have a solution. If I were tackling the issue I'd be tempted to build up the effect again. Checking along the way that the 0 width issue didn't reoccur.

@creedon That could explain it! I will purge my code this weekend and see what happens. I had to try a lot of things before we got the right rollover effect - the joys of working with a team of designers (architects, not web!)

I have a media query question for you that maybe you know.  I am having issues with what breakpoints to use. I started with 768, 1024, but then it was suggested to use 640, and then someone said 480 also!!! 

Basically I need it to look good on mobile, tablet (surface), and laptop. 

It looks great on my 17" widescreen so far, and I had it looking okay on mobile. But, when I use 768, it looks crappy on the Surface. It probably wouldn't be an issue but 2 of our principals have them! 

1) Is there a list of standard media queries to use? The way it's naturally responsive looks terrible because I made so many customizations. 

2) Is it best practice to use min-width and max-width or best to leave out one of the other? 

Sorry for the questions! I got pretty far with the CSS design and my Principal group loves it, but media queries are not my strong suit. I get one device and then another looks terrible. 

4 hours ago, deaton72 said:

1) Is there a list of standard media queries to use?

There are probably some lists on the web. The ones you listed are all pretty common ones. But not necessarily on SS websites. For break points I usually try to stick with the ones for the version and template of SS I'm working on. To know which ones are in use you have to know how to inspect the website code and then find the site.css file.

4 hours ago, deaton72 said:

2) Is it best practice to use min-width and max-width or best to leave out one of the other? 

It depends on what effect you want to apply and when. There is no best practice in regards to this.