Search the Community
Showing results for tags 'full-bleed'.
-
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 -
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; } } -
Site URL: https://www.davidmarquez.se/ Hi! https://www.davidmarquez.se/ I recently moved to 7.1 and decided to redo the site by having only the bare minimum and just let my portfolio speak for itself. Photo categories were completely removed and I have the photos shown large enough so there is no need for an extra click. I'd appreciate the feedback: Does it feel too simple? Are the photos on a good size? Bigger contact button maybe? Let me know what you think, thanks! David
-
When modifying a full bleed image block I get the parameter 'Section Height' (S,M,L) that I can bring up to 10 leaving a small space at the top and at the bottom of the image. I would like to get rid of this space by bringing the section height to 0. Is there a code that I could use to achieve that? Thank you. -
Hi guys, do you guys know any code to make the consistent image size for both iMac and mac pro(laptop)? Currently, the image on my website is set to the full bleed and it looks perfect on iMac 27". However, when I look at it on my laptop(mac pro 15"), the image and gif don't look the same as the ones on iMac. I don't want the images to get changed based on the window size. Please help. Thank you! -
Site URL: http://simonbergstrom.co/manfrotto Hey there I would like to make the video blocks full bleed just like the pictures below them are. Is that possible? I found some CSS that did it when minimizing the browser, but I want it to be full bleed no matter the size of your monitor, again, just like the pictures below. Thanks in advance!
-
Hello! Help needed! Currently my Home page | front page is full bleed using an index with a gallery subpage. Unfortunately both the Navigation title and submenu title appear. In this case Home, Home. On mobile it's worse with Home twice and indented on second Home, both appearing without looking into the submenu. I had some code that removed the second menu item on mobile but for some reason it doesn't work anymore. /* Mobile nav color */ nav#mobile-navigation * { color: white; } #mobile-navigation use.sqs-use--icon { fill: white !important; } I can't move Home to the unlinked folder - it's not an option to have no Home. I tried to use some code to make the gallery full bleed #fullscreenBrowser .sqs-gallery-design-strip { margin: 0 !important; height:100% !important;} But it didn't go the full width only the height. I added width:100% !important; but it made no difference. I also changed the site width to max 1200 but it actually shrunk it, which is weird. I am at a loss. Any thoughts? -
Site URL: https://bymaza.co.uk I've got a banner of magazine logo's down at the bottom of my homepage - it's one long banner image and I have made it the background. It looks fine on desktop, but you can only see Vogue on the mobile version as it's being cropped. Is there a way for this not to be chopped in half when viewed on mobile? Thank you so much
- 1 reply
-
- 1
-
-
- images
- background
- (and 2 more)
-
Site URL: https://www.justinpape.com/ Hi! I am looking to create a landing page for my site that has a split screen of 2 full bleed images that link to 2 separate Portfolio sections, but still retain my header. I also need it to be flexible for desktop/mobile/tablet to always retain a full bleed split screen The image below is the desired outcome, but with placeholder images. Is this possible? Thank you, Justin https://www.justinpape.com/ -
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!
-
Site URL: https://www.poutacreative.fi/studio-kotoisa What is the correct way to adjust full bleed images to mobile?
