Jump to content

Full Bleed and Width Gallery on Carousel SS 7.0

Recommended Posts

Site URL: https://lifelab.world/landing-page-sample-1

Hello Squarespace experts,

I am in need of some help regarding creating a full bleed/width gallery carousel with autoplay. I have been doing some research and trying some codes from other threads. But I can't seem to find the right block/collection marker for this gallery.

I am not sure if it is #collection-623066c3259d593e990d4272, #block-yui_3_17_2_1_1647341220455_3672 or #block-yui_3_17_2_1_1647427086839_509

I am not an expert, but with this community I am learning and try to solve on my own. I am just stuck at this one.

Site URL: https://lifelab.world/landing-page-sample-1

These are the codes I tried that I also found in the answers from the community:

1.

 {
#collection-61f13c374d7bc663be38628a .gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 30vh !important;
}

2.

#collection-61f13c374d7bc663be38628a {
.slide .imageWrapper img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
.slide .imageWrapper {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}}

3.

#block-yui_3_17_2_1_1647427086839_509 {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

4.
 

body#collection-623066c3259d593e990d4272 {
div#canvas {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

 

I have attached a photo of the header gallery that I am referring to for reference and another gallery within the same URL.

Please let me know if there is anything more needed.
 

Thank you in advance!

 

NOTE:
I have added a code to remove the nav bar on the page header code injection for this page index. I am not sure if it affects the codes above

<style>
  header.Header.Header--top {
    display: none !important;
}
</style>

 

Full width header.png

Full width gallery.png

Link to comment
On 3/16/2022 at 7:03 PM, Naomi-lifelab said:

Site URL: https://lifelab.world/landing-page-sample-1

Hello Squarespace experts,

I am in need of some help regarding creating a full bleed/width gallery carousel with autoplay. I have been doing some research and trying some codes from other threads. But I can't seem to find the right block/collection marker for this gallery.

I am not sure if it is #collection-623066c3259d593e990d4272, #block-yui_3_17_2_1_1647341220455_3672 or #block-yui_3_17_2_1_1647427086839_509

I am not an expert, but with this community I am learning and try to solve on my own. I am just stuck at this one.

Site URL: https://lifelab.world/landing-page-sample-1

These are the codes I tried that I also found in the answers from the community:

1.

 {
#collection-61f13c374d7bc663be38628a .gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 30vh !important;
}

2.

#collection-61f13c374d7bc663be38628a {
.slide .imageWrapper img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
.slide .imageWrapper {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}}

3.

#block-yui_3_17_2_1_1647427086839_509 {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

4.
 

body#collection-623066c3259d593e990d4272 {
div#canvas {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

 

I have attached a photo of the header gallery that I am referring to for reference and another gallery within the same URL.

Please let me know if there is anything more needed.
 

Thank you in advance!

 

NOTE:
I have added a code to remove the nav bar on the page header code injection for this page index. I am not sure if it affects the codes above

<style>
  header.Header.Header--top {
    display: none !important;
}
</style>

 

Full width header.png

Full width gallery.png

I found a solution for this! I hope I can help more people

#URL-SLUG .Index-page-content {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
  max-width: 100%;
}

 

Edited by Naomi-lifelab
Found solution
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.