Jump to content

gallery disappears on mobile!!!

Recommended Posts

  • Replies 3
  • Views 484
  • Created
  • Last Reply

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@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. 

 

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.