FULL BLEED (full width and full height) Gallery Block as Homepage for Jasper template on desktop and mobile

Site URL: https://albertorozco.co/

Please help!

I created a blank page and added a gallery block on my Jasper Jin template page. I have made it as a homepage. albertorozco.co

I am trying to make this page full bleed (full height and full width) on desktop, tablet, and mobile. I have a combination of landscape and portrait photos in the slideshow and they are set to automatically crop images  to maintain a clean ratio. 

I dont want to use another template because Jasper provides all the page templates i require for my page. 

Is there a way to add custom css that will make this page full bleed (full height and full width) on desktop, tablet, and mobile. ? 

Thank you!

Add to Home > Design > Custom CSS

.homepage .sqs-gallery-design-stacked-slide img {
    height: 100% !important;
    top: 0 !important;
}

Hi @tuanphan I am having the same problem with my website. The gallery wont full bleed, im not good with css. It wont bleed on mobile as well as on monitor. Maybe i did wrong css ccoding haha.

rhmnvfx.com

On 7/5/2021 at 3:18 PM, RHMNVFX said:

Hi @tuanphan I am having the same problem with my website. The gallery wont full bleed, im not good with css. It wont bleed on mobile as well as on monitor. Maybe i did wrong css ccoding haha.

rhmnvfx.com

Hi. It looks like you solve this?

@tuanphan Hi apologies. I changed the homepage back. Its still not solved as I used the gallery page instead of an index page. Thanks!
 

The current homepage isnt the full bleed.

Rhmnvfx.com

On 7/12/2021 at 3:34 AM, RHMNVFX said:

@tuanphan Hi apologies. I changed the homepage back. Its still not solved as I used the gallery page instead of an index page. Thanks!
 

The current homepage isnt the full bleed.

Rhmnvfx.com

Add to Design > Custom CSS

/* Home gallery */
body.homepage main#page {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

On 5/5/2020 at 12:35 AM, tuanphan said:

Add to Home > Design > Custom CSS

.homepage .sqs-gallery-design-stacked-slide img {
    height: 100% !important;
    top: 0 !important;
}

 

Hey @tuanphan

I adapted this code so I can try to get a full vh gallery slideshow block that bleeds to the above the nav.

Inititally, I put a gallery slideshow block on the first index but the nav was a solid bar. So I've added this code:

section[data-section-id="6304df38e2df4f3fe362be8b"] {
    height: 80vh!important;
    top: 0 !important;
}

Issues:

• I wanted to do 100vh but the captions were getting cut off;
• The entire block doesn't seem to be 100vh responsively;
• The section seems to jitter the proportions of the block (sometimes looking panoramic, then jumping to 100vh in the next image.

Site: https://eightmonroe.squarespace.com/stylesheet (Sqsp 7.1)
Pw: HelpMe!

Is there a better way to do this?