Jump to content

Search the Community

Showing results for tags 'full-width'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Hi, My client has asked me to create a video that automatically plays in the header of the index page at full browser height. I don't event know if this is possible? I know you can stretch them to full width but the height is determined by the proportion (16:9) of the source video and not your browser... I'm about to create the movie which will take a couple of days and i'm not sure if I should make something really deep (1920x4000) to cheat it, and if this is even workable. their wish is to have a movie (with back-up image) that fills the entire browser window regardless of size, the content over the top then appears as normal, before scrolling down to the rest of the page content below the fold. I've seen this on other sites but not on Squarespace. I've tried getting this to work with a normal image and that's 'quirky' as it never scales quite right to fill the screen, even selecting 'full bleed' in the background image settings. TIA
  2. Hi! I'm trying to make the content block on my site full bleed so I can make it a homepage.
  3. 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!!
  4. I'm trying to make the footer go full width to the screen left, right and bottom. I have custom CSS that I've modified so far: #footer { background: #000066; padding: 30px; margin-top: 60px; text-align: left; } But can't figure out how to make the margin or padding to the container to 0. Not sure if I have the language correct here.
  5. Hi! I used the following code to make my Bedford home page banner full-width (disclaimer: it worked perfectly just had to add it to the footer): <script> (function () { /* To make this work on the homepage only, set this variable to true. Then uncomment the .homepage selector in the CSS below. */ var homepageOnly = false; if (homepageOnly === true && !Y.one('body')) { return; } else { var elem = Y.one('.banner-thumbnail-wrapper'); var windowHeight = window.innerHeight; if (elem && elem.getComputedStyle('display') != 'none') { var content = Y.one('.desc-wrapper') || Y.one('.blog-item-wrapper'); var padding = (windowHeight - content.get('clientHeight')) / 2; elem.setStyles({ 'paddingTop' : padding, 'paddingBottom' : padding }); } else { var wrapper = Y.one('#promotedGalleryWrapper .sqs-gallery-container'); var gallery = Y.one('.sqs-featured-posts-gallery') || Y.one('#promotedGalleryWrapper .sqs-gallery'); if (gallery) { gallery.setAttribute('style', 'height:' + windowHeight + 'px !important'); } if (wrapper) { wrapper.setAttribute('style', 'height:' + windowHeight + 'px !important'); } } } })(); </script> <style> /*body.homepage*/ .sqs-featured-posts-gallery .gallery-wrapper, /*body.homepage*/ .sqs-featured-posts-gallery .slides-controls, /*body.homepage*/ .sqs-featured-posts-gallery .slides, /*body.homepage*/ .sqs-featured-posts-gallery .gallery-wrapper .posts, /*body.homepage*/ .sqs-featured-posts-gallery .gallery-wrapper .posts .post { height: 100% !important; } </style> But on mobile, the image is cropped. How do I resize the image on mobile so that it shows the full image instead of the cropped version? Screenshots attached. Looking forward to hearing from you!
  6. I am trying to make a single code block be basically the full width on only one single page, but just leaving a little bit of padding on the left and right. I'm on 7.0, with the "Pacific" template. I've looked at other similar forum posts and tried what they said, but with not much luck. The page is: https://www.childrenschoir.com/givelively-embedded-test
  7. 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
  8. Site URL: https://cardinalconcepts.squarespace.com/ Hello, Hoping to find code or instruction on how to change the size of a video on a product page, added under additional info, video block. It is from Vimeo. Right now it stretches across the full width of the page and looks ridiculous. It would be great if we could left align it with this size, width="640" height="480" https://cardinalconcepts.squarespace.com/shop/mnemonic-letter-flashcards Thank you!
  9. Hi, When I use the Accordion Block it won't span full width across the screen and I don't see any option for changing that. Any ideas? I don't code. Is this a Squarespace issue or are accordion blocks only made to span about 50% across the screen on laptops? Thanks!
  10. Site URL: https://lily-smilodon-skf3.squarespace.com I am struggling with the slideshow gallery on my homepage. I need it to be responsive. Do I need to (a) use media queries or (b) disable the desktop version and create another one for mobile that is only visible on mobile? I could use some assistance with either recommendation. I'm using 7.1 Thank you!
  11. Site URL: http://www.carolinecatlin.com Hello! I recently redesigned my website and I'm noticing that instead of the background / content filling the screen, there is a large white bar / space to the right of the page. Does anyone know why this might be or how I can fix it? I went back through and looked at my settings and can't figure out what's wrong.
  12. Site URL: https://drum-bulldog-l9ef.squarespace.com/layout Hi, I’d like to be able to make a text block full width in Brine 7.0. I created a blank page and the Image Blocks can be full width, but the Text blocks seem constrained. I would like to be able to mix in full width Text Blocks along with columns on the same page. I would also like to do this on other of pages on my website. Please see screenshot which hopefully explains what I am trying to do. https://drum-bulldog-l9ef.squarespace.com/layout PW: 12345 Thanks 🙂
  13. Site URL: https://www.organizeprioritize.net/services I would like to create a full-width beige bar behind the "Consultation" text seen here. I've used CSS to color in the text box, but is it possible to have the beige go full-bleed? The home page has a full-width beige bar, because it's an index page. Is it possible to create a similar look on a regular page?
  14. 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:
  15. Site URL: https://papaya-armadillo-7acs.squarespace.com/ Password for website: design101 Hi! How do I make an image true edge to edge that remains no matter what screen size? I have a few occurrences across the website where I am using this wave like device to divide sections. I am using code something similar to this for each wave by sourcing the block id first then this following (adjusting the margin-left as needed): { padding: 0; width: 100vw; margin-left: -15vw; } But I find that when the screen size changes something it's not completely edge to edge and affects the overall margin of the site. Please help! Images attached so you know what to look for:
  16. Hi, I added the image gallery (Slideshow:Full) and added pictures. I chose bullets as gallery controls and they are placed below the picture. Depending on the size of the browser, the section below overlaps with the gallery. With that, the lower part of the image is hidden and I don't want that. And the controls disappear, which is contra-productive. I've already used section[data-section-id="627d705257b5ff1a4b9e77a0"] { min-height: 120vh!important; display: block !important; position: relative !important; object-fit: contain!important; } That helps so that the image doesn't get cropped on the top. I just need something for the bottom now. I hope, anyone can help. Kind regards, Justine
  17. Site URL: https://www.unlocklasvegas.com/ Currently only available on the home page, with a large image on the right side of the template. I want it to be dynamic full width throughout the entire website.
  18. Site URL: http://puppydust.net/ Hi all. I'm a motion designer and I'm trying to update my portfolio. On my main page you land and see there's a video for my showreel in the centre, below it thumbnails for various projects I've done. I want this video to be full-width background and for it to be autoplaying, and to keep the menu thumbnails for my projects below it. Currently I can't see how to do this on my Avenue template. I'm willing to change the template if necessary, for instance on Nueva it seems easy to have a full width image/video, however all the content contained in the index gets expanded like a feed below, and I want to keep them as thumbnails. Essentially the resulting effect should be like this (this site wasn't necessarily squarespace, just a good reference) Can anyone help?
  19. Hello everyone, I'm new to Squarespace, for the moment I'm doing some tests to see if Squarespace is the best solution for me. I have good skills in web dev (front-end) but by attacking the design of my new website I am facing the first problem and I would need your expert advice. My problem concerns margins and padding because I would like to make a full-width site with full-width sections. Basically, the template that you can see in the attachment was designed under bootstrap but I can't reproduce it with Squarespace. What do you think would be the best way to get a similar layout? Inject css? leave with template, if so which one? Thanks for your help.
  20. Site URL: https://rabbit-plum-alma.squarespace.com/ Site Password: 1234 The idea is that when you hover your cursor over this section, the background image is replaced. I was able to do this, but for some reason the second image is shifted slightly downwards. How do fix this? Thank you in advance! I have attached the basic code below: // COLOSSEUM TRANSITION // section[data-section-id="6294e65c9d0b6f21a530ba11"]{ .section-background-overlay{ background-image: url(https://static1.squarespace.com/static/6294e6569d0b6f21a530b83d/t/6294e7cf11a02a12de9ccf78/1653925847362/untitled.png) !important; background-size: cover; transition: opacity ease-in-out .9s; opacity: 0 !important; } &:hover .section-background-overlay{ transition: all ease-in-out .9s ; opacity: 100 !important; background-size: cover; //position: fixed; background-image: url(https://static1.squarespace.com/static/6294e6569d0b6f21a530b83d/t/6294e7cf11a02a12de9ccf78/1653925847362/untitled.png) !important; } }
  21. Hey, really struggling to figure out how to make page content full width on supply template, specifically the slideshow block. As you can see on the image there is padding on the left and right of the slideshow, that’s what I am trying to remove completely. I’m currently using custom css on this page to remove header, footer, mobile.bar; change background; and to add buttons on images… so that I can repurpose this as a landing page while keeping the format of supply theme on the rest of my site…. Any suggestions on either making the slideshow specifically full width / no padding or remove padding from this entire page? Below is the CSS currently used: <style> #header, #footer, #mobile.bar { display: none !important;} </style> <style> #main { margin-left: 0; height: auto; } </style> <style> #main {background-color: #E4D5A0; width: 100% !important;} body {background-color: #E4D5A0;} #canvas {background-color: #E4D5A0;} </style>
  22. Site URL: https://olive-cuboid-89bn.squarespace.com/ Hello, I am trying to make the 3 image poster blocks under my main image to fill the section they are in with no padding. I have tried some custom css without luck. the password is: "haetchi" Hopefully someone can provide some advice. Thanks in advance.
  23. 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!
  24. Site URL: https://hemmahemma.com/ I have used custom CSS to make a handful of full width image cards across my site, and they look fine so far on laptop screen size (1440 x 900) and larger, but on smaller screen sizes the image isn't scaling to match the height of the text on the other side, so there is text overflow and a large gap of of white space under each image (see example attached). They do automatically stack on mobile though, which works fine for my purposes. Can anyone help with this?? The site is built in 7.1 Here is the code I'm currently using for each specific section to make the image cards full width: // Full Width Image Card - Page Section // [data-section-id="61af6c6d9d995e1dda60e2fe"] { overflow-x: hidden !important; overflow-y: hidden !important; .content-wrapper { padding: auto !important; margin: 0px auto; display: contents; } .sqs-layout .sqs-row .sqs-block { padding-bottom: 0px !important; padding-top: 0px !important; }} // Full Width Image Card - Text Padding // .image-card-wrapper .sqs-dynamic-text-container { padding: 40px !important; }
  25. Site URL: https://www.philipparedding.co.uk/ Hi I am trying to get the first page of this site to be full width. The gallery pages are working well but this page has a load of space on the right hand side and I cannot see how to shift it. The gallery pages fill up the entire space and I have tried adding a gallery with just the one image but it still has that empty space to the right. This image is 2000 px wide so it should be big enough to fill the space. Any ideas would be much appreciated.
  • 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.