Jump to content

Help with Slideshow Gallery for mobile

Recommended Posts

17 hours ago, sg_squarespace said:

@tuanphan yes I do!

Try adding to Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1627939496444_6075 {
    height: 50vh !important;
}
div#block-yui_3_17_2_1_1627939496444_6075>div {
    height: 100% !important;
    padding: 0 !important;
}}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
On 4/27/2022 at 1:50 AM, sg_squarespace said:

@tuanphan thank you, that worked great for the project page above! Is there an easy way to make that apply to each project page? Or will I need to add the same CSS for each block#?

 

Do you use Personal or Business Plan? If Business, you can add to Page Header

<style>
  @media screen and (max-width:640px) {
.gallery-block {
    height: 50vh !important;
}
.gallery-block>div {
    height: 100% !important;
    padding: 0 !important;
}}
</style>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
3 hours ago, Bysophie said:

Hello I have same issue for my slider: https://bysophie.es/pagina-nueva I need to show it properly for mobile, trying all codes but doesn't work!

<style>
@media screen and (max-width:640px) {
.gallery-fullscreen-slideshow[data-width="full"] {
padding: 3vw;
height: 50vh !important;
} }
</style>

Believe this should do it.  I also made a minor adjustment to the padding, previous value was "6vw"

Link to comment
21 hours ago, Summit227 said:
<style>
@media screen and (max-width:640px) {
.gallery-fullscreen-slideshow[data-width="full"] {
padding: 3vw;
height: 50vh !important;
} }
</style>

Believe this should do it.  I also made a minor adjustment to the padding, previous value was "6vw"

Excellent!! you helped me a lot, rly thank you. Another last question: I disguise the price of the products in the shop category, there is any way to disable them inside every product too? I don't want to show the price in any of them.

For example: remove the price from here. https://bysophie.es/notcollections-blowup/p/katemillet

Im trying with display none but doesn't work (or i'm doing it bad)

Thanks for your time 🙂

Link to comment
22 hours ago, Bysophie said:

Excellent!! you helped me a lot, rly thank you. Another last question: I disguise the price of the products in the shop category, there is any way to disable them inside every product too? I don't want to show the price in any of them.

For example: remove the price from here. https://bysophie.es/notcollections-blowup/p/katemillet

Im trying with display none but doesn't work (or i'm doing it bad)

Thanks for your time 🙂

Add to Design > Custom CSS

body.view-item .product-price {
    display: none;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 5/14/2022 at 11:25 AM, tuanphan said:

Add to Design > Custom CSS

body.view-item .product-price {
    display: none;
}

 

It works Perfect!!

Now, any idea about how to change the URL button of "buy" or "add to cart" of the products? I need to send the users into a "contact" form or page where he can ask about the dresses, not buy them. 

Link to comment
On 5/16/2022 at 3:49 PM, Bysophie said:

It works Perfect!!

Now, any idea about how to change the URL button of "buy" or "add to cart" of the products? I need to send the users into a "contact" form or page where he can ask about the dresses, not buy them. 

It look likes you figured it out 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
  • 3 weeks later...
12 hours ago, HenningSvoren said:

Hi, I need some help with getting the full banner slideshow on this page to not get so cropped on ios:

https://www.oceansound.no/overview-studio-b

(It looks great on desktop)

Hi, You mean top slideshow?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
On 6/27/2022 at 9:08 PM, HenningSvoren said:

Yes!

Thank you tuanphan 🙂

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="62ac7fc3383fd135b9d51f8c"] ul {
    min-height: unset !important;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
  • 3 weeks later...
19 hours ago, Bysophie said:

Still have a problem with the top slider again... When the picture has the thext in the middle of it it works OK but in pictures like this both texts of the sides get cutted

 

Captura de pantalla 2022-07-29 a las 8.53.54.png

Which page are you referring to?

https://bysophie.es/

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 8/1/2022 at 4:47 PM, Bysophie said:

Yes!

It looks like you solved with this code?

  <style>
@media screen and (max-width:640px) {
.gallery-fullscreen-slideshow[data-width="full"] {
padding: 3vw;
height: 50vh !important;
} }
</style>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...

Hi @tuanphan

 

I hope you are still seeing this threads... 

I have been trying to follow this thread along and trying to find out an answer, but looks like I am out of luck. 

I am trying to get myself more familiar with SQSP.  I have been trying to play around squarespace and trying to stylize this slide show gallery. Where I would like a regular slideshow on the desktop version, but on mobile version, I would like to hide the navigation arrow control, and make my image full width. I have been playing with the setting but out of luck. 

I would like to keep my desktop view as is now: 

190650169_ScreenShot2022-11-13at8_49_01PM.thumb.png.5dd10ee613c2322470412fca97157d37.png

But make my mobile view without the control arrow and space on the side

IMG_5430.thumb.jpg.161039715d6ce651fc46717a8c2a5610.jpg

Below was what I used to remove the control arrow, 

/* Remove gallery slideshow arrows */
@media screen and (max-width:767px) {
.gallery-slideshow-control {
       visibility: hidden;
}
}

Here is the css I wrote for full-width slideshow, but didn't work... 

@media screen and (max-width: 767px) {
  .gallery-slideshow[data-width="full-bleed"] {
  width:100% !important;
  height: auto !important}
}

As I expanding the portfolio, I would also want to make it possible to make the code works across the site, not just particular pages.

Thank you and much appreciated with any thoughts and suggestions. 

Screen Shot 2022-11-13 at 8.10.09 PM.png

Edited by Clindes
Link to comment
3 hours ago, Clindes said:

Hi @tuanphan

 

I hope you are still seeing this threads... 

I have been trying to follow this thread along and trying to find out an answer, but looks like I am out of luck. 

I am trying to get myself more familiar with SQSP.  I have been trying to play around squarespace and trying to stylize this slide show gallery. Where I would like a regular slideshow on the desktop version, but on mobile version, I would like to hide the navigation arrow control, and make my image full width. I have been playing with the setting but out of luck. 

I would like to keep my desktop view as is now: 

190650169_ScreenShot2022-11-13at8_49_01PM.thumb.png.5dd10ee613c2322470412fca97157d37.png

But make my mobile view without the control arrow and space on the side

IMG_5430.thumb.jpg.161039715d6ce651fc46717a8c2a5610.jpg

Below was what I used to remove the control arrow, 

/* Remove gallery slideshow arrows */
@media screen and (max-width:767px) {
.gallery-slideshow-control {
       visibility: hidden;
}
}

Here is the css I wrote for full-width slideshow, but didn't work... 

@media screen and (max-width: 767px) {
  .gallery-slideshow[data-width="full-bleed"] {
  width:100% !important;
  height: auto !important}
}

As I expanding the portfolio, I would also want to make it possible to make the code works across the site, not just particular pages.

Thank you and much appreciated with any thoughts and suggestions. 

Screen Shot 2022-11-13 at 8.10.09 PM.png

What is site url? We can check easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 11/14/2022 at 12:42 AM, tuanphan said:

What is site url? We can check easier

portfolio-new.squarespace.com
Passcode: port

 

hey @tuanphan, 

so far I have the images full width, but there is a huge top space. for the one that has smaller height.  just wonder if you can help me to look into this and if it's possible to make it align on the top underneath the menu bar? thanks. 

 

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.