Help with Slideshow Gallery for mobile

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;
}}

@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#?

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>

we have a business plan. thank you so much @tuanphan for all your help! we appreciate it. 

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!

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"

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 🙂

3 hours ago, Bysophie said:

For example: remove the price from here. https://bysophie.es/notcollections-blowup/p/katemillet
Thanks for your time 🙂

<style>
/* remove price */
span.sqs-money-native { display: none; }
</style>

No problem!  You'll get better & faster at making custom edits over time. 

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;
}

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. 

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 

On 5/20/2022 at 4:25 AM, tuanphan said:

It look likes you figured it out 

Yes!! I found a way to do it 🙂 

Is there any form to appreciate your help guys? system of karma, positive votes or something? you really helped me a lot.

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)

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?

On 6/18/2022 at 10:22 AM, tuanphan said:

Hi, You mean top slideshow?

Yes!

Thank you tuanphan 🙂

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;
}
}

On 7/3/2022 at 8:55 AM, tuanphan said:

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;
}
}

 

Perfect! Much appreciated!

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

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

 

Which page are you referring to?

https://bysophie.es/

On 7/30/2022 at 4:23 AM, tuanphan said:

Which page are you referring to?

https://bysophie.es/

Yes!

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>

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: 

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

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. 

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: 

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

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. 

What is site url? We can check easier

20 hours ago, tuanphan said:

What is site url? We can check easier

@tuanphan 

Sorry I thought I have entered it: 

portfolio-new.squarespace.com
Passcode: port

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.