Search the Community
Showing results for tags 'full-bleed'.
-
.thumb.jpg.69ecda7fa45bdd7536ee36dc86e9b34e.jpg)
Hello! I want to create a full-bleed photo landing page, then have the title/navigation home page scroll up into it for a client. Is there any way to not have the title/navigation show on the landing page and place it above the Home page in the Pages menu? This is an example: https://www.nilsfrahm.com Thank you!! -
Hi! I'm trying to make the content block on my site full bleed so I can make it a homepage.
-
Hey y'all, hoping I catch our hero @tuanphan's gaze on this one. url is https://www.samrob.com So I have some custom bits enabling this full bleed slideshow to live behind my transparent nav bar, however, whether I have captions enabled or not, I can't control the height of this black bar at the bottom. It seems like overhang almost, exactly the height that my image is pushed up into the nav space. I'd like the bar to be essentially 2 x the text height, just enough black around it to read the caption neatly. Thanks in advance for anyone's help they can offer! In return I offer friendship! Here's everything I have in Custom CSS on the page right now: .burger-box { display: none; } /* Nav one line */ .header-title-nav-wrapper { flex: 1 0 90%; } .header-layout-nav-center .header-nav { width: 100% !important; flex: 1 1 100%; .homepage .header-announcement-bar-wrapper { background: transparent !important; position: absolute !important; }} .page-section.gallery-section { padding-top: 0px !important; } body{ height:100%; background-size:cover; } html{ height:100%; } .homepage .header-announcement-bar-wrapper { background: transparent !important;}
-
Site URL: https://www.goldenllamaproductions.com/rhythms-of-peru-video Like so many others, looking for a custom code to all the videos on pages like this be a full bleed video with sound. NOT a background banner video. https://www.goldenllamaproductions.com/rhythms-of-peru-video I want it to work like this: https://www.tylerkalberg.com/work-samsung-gear-anybody Thank you for any help!!
-
The third section on the page is a "portfolio preview" of sorts, but when responsive, the left and right images squish and the middle two do not. Is there a way to get these to all resize equally? They are images w/ a color block overlay and hover effect applied in custom css. https://endive-corn-larn.squarespace.com pass: motifhomes Uploaded screenshot of section I'm referring to!
-
Does anyone know how I could have the three attached images auto-scroll like a slideshow? I'd be open to purchasing a plug-in, but haven't found one yet! I've thought through different ways whether that's uploading them as a gallery (but would need a clickable button overlaid on each) or somehow tying together three separate sections. https://bearassbikinis.squarespace.com/ // pw: demo Thanks!
-
Hi, for my new portfolio page i always want to start with the top image full bleed. However, I only get the entire page in full bleed or nothing at all. is there a way to make one image full bleed using custom CSS? Page: https://www.nickennevil.com/lifesaving-stories Block that i want full bleed: #block-yui_3_17_2_1_1663842064732_3952 Thanks
-
Site URL: https://bell-chipmunk-yhlj.squarespace.com/home-draft-copy Hello, I a looking to create a full width, 3 column block that my images can sit inside and preserve there aspect ratio when resizing. I tried stretching out the image blocks to each side however when I resize the page only the middle block retains the same aspect ratio and the others get squished inwards.
-
Site URL: https://daeverettgroup.com/ I've tried every code that I've found on the forum but none seem to work. Is there a way to get this slideshow on the homepage to be full bleed under the header? I've attached a photo of what it looks like before full bleed.
-
Site URL: https://eagle-trumpet-4knc.squarespace.com/config/design/custom-css Hello, I would like to know how to incorporate custom CSS that allows for my slideshow to be full bleed- even within the header. Attached is a screenshot of what I have, and a screenshot from a website that has the style that I am going for. Any help would be appreciated, thank you!
-
Hello! I looked through other posts regarding full bleed blocks and tried various proposed solutions that didn't work for me. I would like that video block to display full screen (as per my screenshot) Appreciate all you in the community! Current: Desired:
-
Site URL: https://www.evolvehumanlabs.com/ I currently have full-bleed static images on top of all my pages and they appear behind the header menu as well. For the homepage, however, I need to change the static image of the eclipse into a slideshow that scrolls between several images. The problem is that when I do this, it no longer bleeds behind the menu but, instead, a solid bar appears behind the menu and the slideshow underneath that. This creates an inconsistency with the rest of the website. I need the slideshow to appear behind the menu the way the static images currently are. Can anybody please point me in the right direction as to how to do this? I have searched high and low and cannot figure it out. Thank you so much in advance! :Alex -
Hi, What CSS code would be required to remove the bottom padding on a full bleed image? I would like the padding at the bottom removed, so my markdown block can sit right at the bottom of the image Thanks for the help.
-
Hi, I would like to show a full bleed video on the lock-screen. On pages i'm able to upload the video to squarespace and it works the way i want it to be. with text on top of the video when showing a video on the lockscreen that i had to upload to vimeo/youtube, it does not show full bleed , the password box is showing below the video. is there a way to do this, can anyone share the custom code ? I used this code for code injection, which displays the video but not full bleed <div class="plyr__video-wrapper"><video autoplay="" loop="" muted="" playsinline=""><source src="https://video.squarespace-cdn.com/content/v1/6161e6a92b253b6eddc1d2c0/94314c70-2583-40d1-acd5-b91b44889c9d/mp4-h264-1080:1080" provider="html5" size="1080"><source src="https://video.squarespace-cdn.com/content/v1/6161e6a92b253b6eddc1d2c0/94314c70-2583-40d1-acd5-b91b44889c9d/mp4-h264-360:360" provider="html5" size="360"></video><div class="plyr__poster" hidden=""></div></div> thank you for you kind help, appreciated! 🙂 URL is www.fio.re according to squarespace this is not a valid URL when submitting to the forum, i did configure the domain succesfully ....
-
Site URL: https://alnoormeralli.com/beauty In the Wells template, the Gallery pages have a fixed-width whitespace separating the images / thumbnails. Any way to remove the whitespace so the images appear "full-bleed"? I want a look similar to Project 5 in Version 7.1, but want to continue using the Version 7.0 Wells template.
-
How can I get a full bleed slideshow block on mobile?
grizzy13 posted a topic in Customize with code
Site URL: http://www.grismphotography.com I have a specific code that makes it so this slideshow only shows up on mobile and tablet devices, or screens smaller than 800 px. The issue is that the image is very small when viewed on mobile. I would like for the image to extend for the entire width of the page. In the image attached, I want the image to go to the red borders. This is a gallery slideshow block as part of an index page. I cannot add another gallery page because the block ID remains the same and will treat it as such.
-
Site URL: https://www.marquesredd.com Hi there, I am trying to make the image currently on my homescreen of www.marquesredd.com completely full screen. The effect I am looking for is on this page but with a single image: https://www.linaviktor.com/ I would like the image to reach all edges of the screen and for it to cover the menu bar and title text like in the example link above. I would also like for the menu bar and title text to be white #FFFFFF. Any and all help is greatly appreciated!
-
Hello 🙂 I'd like to know if I can make my dropdown menu as high as the site? On the chat with squarespace they've told me the height goes as far as the links in the menu itself but there's a way with custom code. Any ideas? Thank you so much in advance!
-
Site URL: http://www.coachhenrylam.com My full size banner images are cropped by like 80% on 7.1 mobile. How do I fix it? I tried this 7.1 code but it didn't work /* CSS FOR TABLET AND MOBILE */ @mobile: ~"only screen and (max-width: 640px)"; @tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)"; /* CSS FOR TABLET */ @media @tablet { /* Insert Code for Tablet Below This Line*/ /* Insert Code for Tablet Above This Line */ } /* CSS FOR MOBILE */ @media @mobile { /* Insert Code for Mobile Below This Line*/ /* Insert Code for Mobile Above This Line */ } Resizing Image Blocks Site-Wide .sqs-block-image { width: 80%; margin: 0 auto; } -
I'd like specific pages to have a full-screen landing video section. I want this video (or photo in other cases) to fill the entire window of the user. So regardless of the window size the video/photo will adjust so that the first section fills the entire screen (width and height). What code injection would I use for this and would I put it in the page header code injection or the design custom CSS setting?
-
Site URL: https://saffron-aqua-j5mp.squarespace.com/config/ Hi there, Could you please help me how to make an image as a full bleed card block like attached? This is for my homepage and the link is below: https://saffron-aqua-j5mp.squarespace.com/config/design Password: chichi2021 If you could help me with the custom codes or any solution, that would be great. Look forward to hear back from you. Cheers
-
Site URL: https://lifelab.world/landing-page-sample-1 Hello Squarespace experts! I am in need of help in doing a full width summary carousel block. I need to remove to the extra space on top and bottom. Please see picture below I have made the codes but it doesn't seem to work for me. I tried these section[data-section-id="6239c51561fe2a1158583990"] .content-wrapper { max-width: 100%; padding-left: 0 !important; padding-right: 0 !important; } AND #block-yui_3_17_2_1_1648549152222_22108 .content-wrapper { max-width: 92%; padding-left: 0 !important; padding-right: 0 !important; } May I please ask for help in fixing the code? thank you!
-
Full Bleed and Width Gallery on Carousel SS 7.0
Naomi-lifelab posted a topic in Site Design & Styles
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 want to create a section like the image on my clients homepage. Any coding that could help achive this look?
-
Site URL: http://anjaemzen.com/ Hi! I was wondering if it's possible to add custom CSS to my Squarespace site, so that all the images are full-bleed when shown on mobile devices? And if yes, what CSS code do I need to add? Thanks a lot, I really appreciate it! All the best, Anja
.thumb.jpg.69ecda7fa45bdd7536ee36dc86e9b34e.jpg)
.png.14dfab382900f38b20c05c82e8a78c63.png)
