Full Bleed and Width Gallery on Carousel SS 7.0

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>

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>

 

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