Jump to content

Mobile View Carousel

Recommended Posts

  • Replies 17
  • Created
  • Last Reply

Top Posters In This Topic

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/

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

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

 

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

 

17B97B39-2F0D-4753-953A-99606B5AC395.png

F5275B68-E7AF-4899-93FF-2FCEF9491F54.png

78C630BD-3119-424C-AA3F-375F574AA183.png

Link to comment

Add to Design > Custom CSS

/* Mobile-Homepage-Negative Black padding */
@media screen and (max-width:767px) {
[data-section-id="623d3d1daf057f7c2f1810dc"] {
    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
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;
}
}

 

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
  • 4 months later...
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 :

1946943435_Capturedcran2022-07-3120012555.png.b6fdea6e8449be03ca18077362c88836.png

 

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

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/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 :

1946943435_Capturedcran2022-07-3120012555.png.b6fdea6e8449be03ca18077362c88836.png

 

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>

 

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

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

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.