Mobile View Carousel

Mobile View Carousel to display 3 images columns side by side instead of one giant image? 

Does anyone know how to create a media query for 3 columns on the gallery, carousel so it mimics the desktop view for a more visually appealing feel to mobile view 

Can you share link to page in screenshot? We can check easier

15 hours ago, tuanphan said:

Can you share link to page in screenshot? We can check easier

www.enchantanddelight.com.au homepage reviews carousel 

On 3/24/2022 at 7:11 AM, christina_marie_333 said:

www.enchantanddelight.com.au homepage reviews carousel 

Thank you. I see product list only, no carousel on https://enchantanddelight.com.au/

51 minutes ago, tuanphan said:

Thank you. I see product list only, no carousel on https://enchantanddelight.com.au/

https://enchantanddelight.squarespace.com/config/pages 

password help

https://enchantanddelight.com.au/home

Password help. Also how do I remove negative space between section blocks on desktop and mobile view and is there a way to format the 

Three images in the second child too add display side by side with text blocks in mobile view to match desktop.  

Thank you greatly need help 

On 3/26/2022 at 1:52 PM, tuanphan said:

Thank you. I see product list only, no carousel on https://enchantanddelight.com.au/

Did that work for you @tuanphan 🙂

Try adding to Design > Custom CSS > then save & reload the site

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="623864e6c69f9c657ced8636"] ul {
    grid-template-columns: repeat(3,1fr) !important;
}
}

13 hours ago, tuanphan said:

Try adding to Design > Custom CSS > then save & reload the site

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="623864e6c69f9c657ced8636"] ul {
    grid-template-columns: repeat(3,1fr) !important;
}
}

Thank you so so much! I’ve applied and it works perfectly. I’d like to know how to remove negative padding page on mobile? 

In the different child’s. Also  

I’ve uploaded photos to try to explain what i am needing further assistance with. 

Q1

In the second child of the page on desktop view the images in first screenshot appear side by side (horizontally with text block directly below the image) Is there CSS available on Sqaurespace that can help these four images and text boxes to display the same on mobile and desktop view. 

Q2 Is it possible to add CSS code so that the image card block appears the same on desktop and mobile view as seen in the screenshot where the image is beside the text? At the moment the text card displays below the image. 

Q3 Same goes for screenshot 3, is there CSS that can force the image to display beside the text? And in a way that the image and text padding are the same height?

1. This is the negative space I am referring to. Thank you

Add to Design > Custom CSS

/* Mobile-Homepage-Negative Black padding */
@media screen and (max-width:767px) {
[data-section-id="623d3d1daf057f7c2f1810dc"] {
    min-height: unset !important;
}
}

6 minutes ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile-Homepage-Negative Black padding */
@media screen and (max-width:767px) {
[data-section-id="623d3d1daf057f7c2f1810dc"] {
    min-height: unset !important;
}
}

 

Thank you. that worked. Are you able to help out with the other question in this chain msg

On 4/1/2022 at 2:48 PM, christina_marie_333 said:

Thank you. that worked. Are you able to help out with the other question in this chain msg

Q1

In the second child of the page on desktop view the images in first screenshot appear side by side (horizontally with text block directly below the image) Is there CSS available on Sqaurespace that can help these four images and text boxes to display the same on mobile and desktop view. 

Q2 Is it possible to add CSS code so that the image card block appears the same on desktop and mobile view as seen in the screenshot where the image is beside the text? At the moment the text card displays below the image. 

Q3 Same goes for screenshot 3, is there CSS that can force the image to display beside the text? And in a way that the image and text padding are the same height?

Add to Design > Custom CSS

/* Mobile home 4 columns */
@media screen and (max-width:767px) {
div#page-section-623d414508e1be4a83b89ba2 .span-3 {
    width: 25% !important;
    float: left !important;
}
div#page-section-623d414508e1be4a83b89ba2 .span-3 * {
    font-size: 12px;
}
/* q2 */
div#block-092b802cf5a26de05c6a figure {
    display: flex;
    -ms-justify-content: space-between;
    justify-content: space-between;
    align-items: center;
}
}

Hello @tuanphan,

I would like to remove the arrows (on desktop and mobile) of my lists of images :

My website:

www.brondyhumphrey.com
psw: pure


Could you help me with this please ?


 

On 8/3/2022 at 7:46 AM, iJizzy1 said:

Hello @tuanphan,

I would like to remove the arrows (on desktop and mobile) of my lists of images :

 

My website:

www.brondyhumphrey.com
psw: pure


Could you help me with this please ?


 

Can you check site url? I entered password 4 times, it doesn't say incorrect but always reload password page

Hello @tuanphan , I desactivated the multilanguage code.

It is working now, you can access to my website.

On 8/3/2022 at 7:46 AM, iJizzy1 said:

Hello @tuanphan,

I would like to remove the arrows (on desktop and mobile) of my lists of images :

 

My website:

www.brondyhumphrey.com
psw: pure


Could you help me with this please ?


 

Add code to Page Header

<style>
  div[class*="arrows"] {display: none !important;}
</style>

It is working for the list of images but I have also some list of summary block as you can see on the page.

Do you have the code for removing the arrows of the summary block lists ?
(the one you gave me only remove the arrows of the list of images.)

Also, If I remove the arrows I wont be able to naviguate between each block anymore... This is why I would like to be able to slide between each block like on the Netflix app.

Do you think you could find a code to make someting like that also ?

We are still on the same page called : https://www.brondyhumphrey.com/expansion-2

On 3/29/2022 at 12:58 PM, tuanphan said:

Try adding to Design > Custom CSS > then save & reload the site

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="623864e6c69f9c657ced8636"] ul {
    grid-template-columns: repeat(3,1fr) !important;
}
}

 

Hi there I tried doing the same with my website but instead switched the data section id, but it didn't work, any advise

On 2/25/2023 at 2:54 AM, NzuriTalents said:

Hi there I tried doing the same with my website but instead switched the data section id, but it didn't work, any advise

 

Need a space here