Jump to content

mobile optimization for slideshow gallery

Recommended Posts

Site URL: https://www.meditechsystems.com.au/new-home

I need some help with the gallery mobile optimization

//resizing on mobile
@mobile: ~"only screen and (max-width: 640px)";

@media @mobile {
.sqs-block-gallery {
  display: none;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}
}
//resizing on mobile

 

this is the code I used, which worked on other sites I have done in the past, but not on this one,

I appreciate your help on this 

Link to comment
  • Replies 5
  • Views 371
  • Created
  • Last Reply

Top Posters In This Topic

5 hours ago, VJPViswanathan said:

Site URL: https://www.meditechsystems.com.au/new-home

 

I need some help with the gallery mobile optimization

//resizing on mobile
@mobile: ~"only screen and (max-width: 640px)";

@media @mobile {
.sqs-block-gallery {
  display: none;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}
}
//resizing on mobile

 

this is the code I used, which worked on other sites I have done in the past, but not on this one,

I appreciate your help on this 

Hi,

You mean resize gallery height on mobile?

Can you disable autoplay? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
On 8/26/2021 at 12:41 PM, tuanphan said:

Hi. Have you solved it yet?

No, I tried a workaround and added 2 galleries one with cropped images and another with autocross off. I disabled the autocrop gallery on the mobile and now trying to disable the non-autocrop gallery on the desktop version.

Basically I am trying to hide the second gallery on the desktop on this page - https://www.meditechsystems.com.au/new-home

 

below is the css I used that is not working:

@media screen and (min-width:768px)
{
  [data-section-id="yui_3_17_2_1_1631032259232_668.sqs-gallery-container..sqs-gallery-block-slideshow"]
  {
    display: none;
}
}

Edited by VJPViswanathan
Link to comment
On 9/8/2021 at 11:16 PM, VJPViswanathan said:

No, I tried a workaround and added 2 galleries one with cropped images and another with autocross off. I disabled the autocrop gallery on the mobile and now trying to disable the non-autocrop gallery on the desktop version.

Basically I am trying to hide the second gallery on the desktop on this page - https://www.meditechsystems.com.au/new-home

 

below is the css I used that is not working:

@media screen and (min-width:768px)
{
  [data-section-id="yui_3_17_2_1_1631032259232_668.sqs-gallery-container..sqs-gallery-block-slideshow"]
  {
    display: none;
}
}

To hide second gallery on desktop only, add this to Design > Custom CSS

/* Hide Second Gallery on desktop */
@media screen and (min-width:641px) {
div#block-yui_3_17_2_1_1629784870886_73885 {
    display: none;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.