Search the Community
Showing results for tags 'full-bleed'.
-
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? -
Site URL: https://www.shahfoundation.org/ Below my header on the home page, I have placed a Gallery Section with the gallery option type of Slideshow: Full. I have used images sized @2500px W x 600px H with a concentrated center image area of approx. 800px x 600 px for valuable information which I would like to appear on all screen sizes especially when going down to mobile view. This formula seems to work well without additional CSS, however at a certain larger screen size of 3000px on 30in monitor and full screen width on 15" laptop, the images begin to stretch beyond their full size, clipping the top and bottom of the image. I previously have been using: .gallery-fullscreen-slideshow{ height: 46vh!important; } to adjust for the clipping of the image for the specific clipping I have seen, but is there better code to keep the slideshow from clipping at these larger screen sizes with a better responsive solution? Thanks in advance. -
Hi all, How do I make a gallery carousel in a blog post fully bleed from left to right? This is what it currently looks like. The change will be applied to hundreds of blog posts so ideally the solution should not be block/collection specific. I want it looking like this below which seems to only work on a page. These are the options that comes under Slideshow Full with Full Bleed. -
Site URL: https://mcamediam.squarespace.com/teatro-gerolamo Hi Guys, I'm working on this website: https://mcamediam.squarespace.com/ted-x Client requested me that the video must be full width (just like the Home Page). I don't want to use YouTube to host every video for every project, so I'm asking you a line of CSS code to assure that every video for every case like these are in full width mode. https://mcamediam.squarespace.com/ted-x https://mcamediam.squarespace.com/pagani-mca-media https://mcamediam.squarespace.com/teatro-gerolamo How can I achieve that? Thanks, Dario
-
Site URL: https://www.isadoreintimates.com/ Hi, I am trying to make my footer part of my full bleed image instead of below, but can't seem to work out how. This is my website: www.isadoreintimates.com, I dont understand what I am doing wrong ps. also only on the home page! not the other pages my template is Marta
-
Site URL: https://www.metrichotel.com/home Hi everyone and @tuanphan, I am using Brine on 7.0 and for the life of me, I cannot get the index slideshow gallery to do a full bleed on any platform. Tried all sorts of settings and code I've found here, but nothing seems to work. Is this possibly a problem with the aspect ratio? I noticed that when using a few code snippets, the mobile view seemed to expand but had a black negative space on the bottom half of the screen instead of expanding the photo down. Thanks so much in advance!
-
Can someone please help me make this video full bleed?
nc1983 posted a question in Coding and Customization
Site URL: https://www.goldenllamaproductions.com I would love for my demo reel video to be displayed like a full-bleed banner but with a play button and sound. I've seen it done before but cannot get it to work using the coding suggestions previously suggested in other discussions. Thank you!! https://www.goldenllamaproductions.com -
Hi, I am trying to make my eflsight widget become the full width of the website. The widget is the counter in the middle of the page where there are 5 different statistics. I tried using the following code below and for some reason it is not working. Can someone please help me solve this problem? Thanks! Website Link: https://alpaca-carrot-54zs.squarespace.com/chinesehome [data-section-id="610c6219b631287742b377e8"].content-wrapper { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
-
Vertical scrolling image, is it possible?
jenniferboddam posted a question in Coding and Customization
Site URL: https://flugelhorn-seahorse-lzrb.squarespace.com/config/pages/60aecc3b0856c07375a2e1c7?p Ok, so I hope its not painfully obvious but I dont know why this isn't a thing? I'm trying move my portfolio site from adobe portfolio over to squarespace. I have a long scrolling image I like (I've posted the example from old site) where you can just continuously scroll it But no matter how many ways i try to upload it, it just gets cropped. so is there any css or any way to stop this from happening. Or does any one know a workaround for how i could get this to work in this long image style? my site: https://flugelhorn-seahorse-lzrb.squarespace.com/config/pages/60aecc3b0856c07375a2e1c7?p pw: design- 4 replies
-
- 1
-
-
- css
- full-bleed
- (and 2 more)
-
Site URL: https://scarlet-grape-g5ln.squarespace.com/ Hi there, I was looking for help with making a video full-bleed responsive with the website edge to edge. I also want it to work for both desktop and mobile. I have two examples running on my page right now. There was one where I am running it as a background video using BUT it wasn't centering properly. Part of it was being cut off by the header and it wasn't centering on the mobile properly either /* Section background image 16:9 video */ //show on mobile section.page-section[data-section-id="61019a7c2ef1a604d30e6b10"] { display:block !important; } // show on desktop html.no-touch section.page-section[data-section-id="61019a7c2ef1a604d30e6b10"] { display: block !important; top: 0 !important } section.page-section[data-section-id="61019a7c2ef1a604d30e6b10"] { //16:9 spacer padding-bottom: 56.25%; min-height: 0 !important; .section-background .sqs-video-background iframe { //make it the size of parent no matter what automatic JS it would like to do border-width: 0; position: absolute !important ; top: 60%; left: 60%; margin-right: 0%; transform: translate(-50%, -50%) } // blocks would be here but we won't have any .content-wrapper{ display:none !important; } } I was currently using this (a code of yours that I found in the past) in the CSS for the second version of the video underneath the one that is currently full-bleed /* Video fullwidth */ [data-section-id="6103292e6ee0aa3483fa6e22"] .content-wrapper { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; } Website: https://scarlet-grape-g5ln.squarespace.com/ P: doormat123 -
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: https://doublevision.squarespace.com/ I'm trying to add a video that displays in full bleed. Currently I'm using the 'Video' option when choosing 'Add Section'. Currently working in in 7.1, and have not managed to make any of the CSS that people have provided out there work. An example of what I'm EXACTLY trying to achieve is the video that can be found by scrolling down in here: https://www.davidoscroft.com/polo-denim-fall-2019 Pass: DVTest
-
Site URL: https://clownfish-coral-haax.squarespace.com/ Hi everyone, I am trying to make a simple hover over feature that changes one image to another. I managed to code that much, but as you will see on the site there, it is set in with awkward margins... Im trying to get it to be full bleed..... any help would be greatly appreciated! See my CSS code attached--- Thanks, Anthony
-
How to make an image card full bleed to one side
Letetia posted a question in Coding and Customization
Site URL: https://ladybug-chicken-wtws.squarespace.com/ I am wanting image cards to be full bleed either left or right with a medium content width for the text to fit in the middle of the screen. I have managed to achieve with a plugin with the left image however I'm struggling with the right image. Any guidance? -
BG video visible underneath full-bleed project photos
joshroos posted a question in Coding and Customization
Site URL: https://www.roosbrothers.com Hi, I am having an issue where my background video is still visible at the top of my portfolio page when hovering on project links that display full-bleed photos. Website here: https://www.roosbrothers.com Any idea why this is happening? Thank You! -
Change product detail images to full bleed CSS
memberiy posted a question in Coding and Customization
Site URL: https://crosby-demo.squarespace.com/shop/p/pencil-plant Trying to change my product detail page images to have a full bleed, and for my product info/cart to stay static on the right - similar to the design of the below shop. What CSS can I insert? I have already changed my product images to stacked, so just need to amend gallery to full bleed. Inspiration https://www.jacquemus.com/product/la-robe-obiou-optic-white Template https://crosby-demo.squarespace.com/shop/p/pencil-plant- 3 replies
-
- 1
-
-
- css
- product-page
- (and 3 more)
-
Getting Full Bleed Header Image on Blog Pages
AttractiveToast posted a question in Coding and Customization
Site URL: https://www.outbrnd.com/ Hey Guys, I had to put my site on hold for a while and now that I'm back, Squarespace seems to have changed quite a bit. I've now tried to create a blog on my site, which is going to host some articles for SEO purposes. However, at the top of each post, I'd like to have a full-bleed image, or at the very least, I'd like it to almost reach the edge of the browser. The only thing I can think of is to create a custom CSS script that will change the image block's width on each blog post. However, the problem with that is that I intend to have a lot of posts, so i'm going to end up with a LOT of custom CSS Scripts just for the image blocks. Another thought I had, I can possibly 'diy' a blog system by creating multiple pages (one normal page for each post - using normal pages since they have the option for a header with a full-bleed image) under a folder, and having that folder's page show images which link to the individual posts. Although, that would be quite a bit of extra work just to have full-bleed header banners. Is there another way that I can achieve this? Any help here would be appreciated. -
Hi, I'm having issues making my instagram feed full bleed. ive use the code below but there is still padding on the left and right and I cant remove it. Any thoughts? //instagram footer// [data-section-id="5f36f92cd2f3677399df26bc"] .content-wrapper { padding-left: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; margin-bottom: 0px !important; } div#block-yui_3_17_2_1_1597438235439_32573 { padding-bottom: 0 !important; } https://gardenia-cyan-txbg.squarespace.com/ password feel2020
-
Site URL: https://imgur.com/a/yoEoMPO How can I create a full-bleed/fullwidth portfolio page? I am trying to remove all boarders, but there doesn't seem to be a setting for this.
-
Site URL: https://www.platformartprojects.com/babar-suleman-project Hello, I have created an embedded image map with image-map.net. Is there some code I could add that will make this work responsively on all devices? I would also like to remove the header and footer space from just this page on the site so that the image is full bleed. At the moment it looks fine on desktop but white blocks appear in the top and bottom right side of the screen on mobile. I'm very grateful for any help! -
Add full bleed images with text and button overlay
elizablake posted a question in Coding and Customization
Hello! I want both of my images to be full bleed in the top section of the site. The left image needs to have text and button overlay. I'm thinking is there a way to stack to sections horizontally instead of vertically? I also need the vertical line to be top to bottom. This is my design: And this is what I have been able to achieve in Squarespace so far: -
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; }} -
Site URL: https://www.reelhires.com/app Hi! I essentially want a landing page for our app that is under the domain but apart from the rest of the website. The app is working successfully in the embed block but the block itself is in an odd position. I want to make it full-bleed or at least full page. I have tried CSS code to remove padding aimed at both the block and the section, but nothing happened, which makes me think part of the problem is targeting the embed block. Help!
-
Site URL: https://keyboard-jaguar-k52z.squarespace.com/ Hi there, I'm trying to achieve this effect: when clicking on the search icon in the header, it opens a full screen window where to type the search and where the search results are shown. Something like this: https://pauliandsisters.com/search This is the website I'm working on: https://keyboard-jaguar-k52z.squarespace.com/ Password: tpt-2021 Thanks in advance for your help!
-
Set image full bleed outside of site padding
LuckyAndSon posted a question in Coding and Customization
Site URL: https://www.craftedfestival.com.au/ Hi guys, I've been doing some serious CSS hacking trying to get a wave graphic to sit over my banner images on the Brine Template. I've managed to add the image to every page, however the site has 30px of padding site wide. To get the image to be full width, I've added a -30px margin to the left but then the banner stops short on the right as the width isn't long enough. To overcome this, I've tried making the wide 100% + 30px but for some reason this extends the graphic outside of the website container and makes a horizontal scroll bar for about 200px! So now I've got the width set to 103% which works on some screen sizes, but either goes past site boundary on extra large widths, and falls short on mobile. Any ideas on how to get the wave graphic to just fit perfectly at 100% of the page but not within the site padding boundary?? /*Add wave to banner images*/ #block-yui_3_17_2_1_1620107629754_2747{ overflow: visible; &:before { content: ''; width: calc (100% + 30px); height: 100px; background-image: url(https://static1.squarespace.com/static/58a18e6da5790a7c3fcaaf73/t/6090a1cb6f648c6378f7640d/1620091339242/Image-wave.png); position: absolute; margin-top: -100px; margin-left: -30px; } }
