Jump to content

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

Recommended Posts

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!

 

Link to comment
  • Replies 6
  • Views 2.4k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 1 year later...
  • Susana_SQSP changed the title to FULL BLEED (full width and full height) Gallery Block as Homepage for Jasper template on desktop and mobile
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.comimage.thumb.png.c073c9d0fe133b202e419df069b19404.png

Hi. It looks like you solve this?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
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?

Edited by OldLadyStudio
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.