Search the Community
Showing results for tags 'full-bleed'.
-
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!
-
Dropdown menu full height of the site
HandegardArkitektur posted a question in Coding and Customization
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: 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!!
-
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; } -
Site URL: https://panda-circle-z7t2.squarespace.com This first image in the scrolling carousel is aligned with the left margin of my site, and i have set it to "full bleed" so you can see the some of the image to the left also. I would like to push that left margin (or slideshow scrolling starting point) towards the middle of the page about 100px maybe? So that even more of the image to the left is showing, and the first key image is moved closer to the middle. This will revel the word "BRAND" that is part of a transparent PNG, the last image in the carousel The arrows at the bottom will need to move also so they stay aligned to the left of the first image Im hoping to find some CSS to give me the result, i have tried my best but cannot seem to find a way to target this section Im using 7.1, hope this makes sense.. I posted a picture of what the Finished result would look like also. And when you scroll left, the "BRAND" would slide away into the left, because it's built into that PNG in the carousel I have a password also but was skeptical to post publicly. Let me know if you can help š -
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!
-
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?
-
Make images full bleed when shown on a mobile
anjaemzen posted a question in Coding and Customization
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 -
Site URL: https://amphibian-porcupine-6hk9.squarespace.com/interior-design-services-1 Hi! To make the full bleed photo at the bottom I used this code: #block-45a3f8f650e172ec1b38{ padding: 0px ! important; margin-top: 10% !important; margin-left: -20% !important; margin-right: -20% !important; } However, when I try and change the height the entire page gets messed up. Is there a better code to make this photo full-bleed & if not how can I adjust the height using the code I have now. Thanks!
-
How do I display a full bleed Vimeo playlist/showcase? Either horizontal order or vertical order?
-
Site URL: https://adamsonvisuals.com I'm revising my site and trying to get functionality like this site https://www.yannb.net/ which is also based on Wexley. When you arrive on the site you have a gallery of several images that auto scroll - in full page full bleed format. From there menu items will take you to regular image galleries of standard layout - just struggling to work out how to get the initial full bleed home page look - any advice? Seems simple but can't work it out. Thanks -
Site URL: https://amphibian-porcupine-6hk9.squarespace.com/interior-design-services-1 https://amphibian-porcupine-6hk9.squarespace.com/interior-design-services-1 I am updating a website and am having trouble making this full- bleed, I dont think it is supported by the template chosen, any help with code? Thanks, Lindsey
-
Site URL: https://www.celsodinizphoto.com/ Hi, Is there a way to make this page https://www.celsodinizphoto.com/new-page behave like this https://www.celsodinizphoto.com/behind-the-scenes or like this https://www.celsodinizphoto.com/videobts/ in the sense of using the whole real state instead of being limited to the max width size allowed on the style set up? Thanks! Celso. -
Adjusting Full Bleed Images to fit to Mobile Screen
SoniaSmith posted a question in Coding and Customization
Hi There, I am currently trying to make my website mobile friendly, however it will not allow images that fill the screen to shrink down to fit the mobile size. I used some code to remove unwanted padding and gaps on desktop, unsure if this has anything to do with the problem. Thanks! -
Site URL: https://optimum-time-dev-site.squarespace.com Hi! I am having a slight issue/bug appear on mobile and desktop after adding some custom-css to make an image block have two images side-by-side and full screen/viewport. Please see attached mobile screen view: Basically the first image is greyed-out in the CMS View and when viewing the website on desktop and mobile. It just fails to appear on page load, then appears finally on page scroll. The 'slide-in' animation I have set globally also fails to transition, I'm guessing this is purely down to the image not appearing? I've tried a few things in the custom css to target the image block independently but no joy. Any help or pointers would be much appreciated! And thanks to everyone who helped me get this far by adding custom css fixes to the forum, they have been so helpful in customising the out-of-the-box Squarespace templates. Oh, password is: OptimumTime Thanks in advance! -
Full bleed background colour behind individual blocks.
LB4 posted a question in Coding and Customization
Site URL: https://www.erictomandbruce.com/ Iām using the Template York and am trying to make full bleed, edge to edge background colour behind some of the text blocks on my page. Currently Iām using this code, but am only able to get it to fill in just around the text rather than the whole page. #block-yui_3_17_2_1_1639016212732_4739{ background: #fbe5ee; padding: 40px; text-align: center; } Is anyone able to help me with some code to extend the coloured area to the edge of the page, and have it resize to fit if the screen size is altered? -
Site URL: https://www.harveyaquino.com I'd like to have this image in my homepage expand. I'm on 7.0, Haute template. Thanks!
-
Make home page image poster full bleed in mobile
notagbacks86 posted a question in Coding and Customization
Site URL: http://www.npcsa.org I'm using version 7.0 and the avenue template. We like how the home page looks on a computer, but we'd like the 'poster' image at the top to be full bleed on mobile. How can I do this with custom CSS? -
Have images align as it scales in a full bleed section
Leath posted a question in Coding and Customization
Site URL: https://apple-cobalt-rm97.squarespace.com/ Hi! I am trying to have images full bleed in a grid (see images below) with copy below each image. I have somewhat achieved that however the larger image doesn't stay aligned to the bottom of the other images as it scales. The code I used is below. Does anybody have any ideas of how to fix this or a better idea of how to achieve the overall look in general? The images will be links to the programs. I am also having trouble with the text below needing a bit of padding on the left, mainly on the larger image and also making the leading tighter just on this section. Thanks! ////// PROGRAMS HOME PAGE ////// // text no padding // #block-yui_3_17_2_1_1621910892795_30376, #block-yui_3_17_2_1_1621910892795_25128, #block-yui_3_17_2_1_1621910892795_26488, #block-yui_3_17_2_1_1621910892795_29021, #block-yui_3_17_2_1_1621910892795_27755 { background: #000000; padding-bottom: 0px; padding-left: 20px; text-align: left; } // Image no padding // #block-yui_3_17_2_1_1621910892795_10252, #block-yui_3_17_2_1_1621910892795_11420, #block-yui_3_17_2_1_1621910892795_16220, #block-yui_3_17_2_1_1621910892795_19896, #block-yui_3_17_2_1_1621910892795_22882 { padding: 0px; } // Full Width Image Card Page Section // section[data-section-id="60ac50915a700a0d77d5774d"] { overflow-x: hidden !important; overflow-y: hidden !important; .content-wrapper { padding: 0px !important; margin: 0px auto; display: flex; display: contents; } .sqs-layout .sqs-row .sqs-block { padding-bottom: 25px !important; padding-top: 8px !important; }} -
Hi, I'm trying to let some transparent areas on my background png images (full bleed) to show up as black. Under section themes, I set the background to black under "Sitewide". I noticed that when I set the background image under "inset" it will let the black show through as I hoped the full bleed option would. Is it possible to enable black backgrounds like this for full bleed backgrounds? It seems anytime the background png is set to full bleed, the background color is always white, rather than black. I suppose I can always just set the background color black on the original art files, but I'm wondering if the above is possible š Thanks in advanced. -
I have a banner image that bleeds all the way to the bottom header. Is there any way to have it not be a full bleed image?
-
Site URL: https://www.poutacreative.fi/studio-kotoisa What is the correct way to adjust full bleed images to mobile?
