Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'full-width'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • 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. 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.
  2. 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 🙂
  3. 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?
  4. 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:
  5. 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:
  6. 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
  7. 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.
  8. 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?
  9. 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!!
  10. 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.
  11. 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; } }
  12. 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>
  13. 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.
  14. 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!
  15. 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; }
  16. 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.
  17. Site URL: https://www.matthiasvogel.com Hello, On my site I am using simple slideshows. They do look good on desktop screens, laptops and tablets. However, on mobile phones they are a bit tiny. Is there any way to make simple slideshows appear full-width on mobile phones only? Many thanks for your support!
  18. 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; }
  19. Hello, Is there CSS to optimize my Wells template pages for full width responsive design in displaying my pages at full width for desktop and tablet, and columns for mobile. Here is a link to my pages: https://www.andyryanphotographer.com/projects Thanks
  20. Site URL: https://www.lago.lt/store/p/day-dreaming Hi, Been searching for answer for a few hours, unfortunately unsuccessfully. How to remove padding and margins for a specific block on Squarespace 7.1? In my case, I want to make additional information section in products page full-width, without any padding or margins. https://www.lago.lt/store/p/day-dreaming Password: Slyva1
  21. Site URL: https://drinkzuzu.squarespace.com/ I am trying to recreate this site for practice: https://www.drinkzuzu.com/ And here is my version: https://drinkzuzu.squarespace.com/ pw: drinkzuzu I'm really struggling with the split SHOP NYC + LA / ORDER ONLINE link blocks. I have it mostly figured out except how to get it to be full width. Also, while I'm here, I am also trying to figure out how to make the images in "as featured in" carousel spaced a bit closer, as seen in the example. If anyone can help me at all on how to make my site a bit more identical to the original, I'd really appreciate it! Thanks!
  22. 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!
  23. Site URL: https://moode-inc.squarespace.com/ https://moode-inc.squarespace.com/ password: moodejudy Hey! Hoping that someone could provide me with a code to fix this issue. I have a carousel gallery and I've adjusted the site styles and used some code so that there is no padding and the gallery takes up the entire section, but it is too tall and overwhelms the page. I've tried adjusting the size of the images and several different code snippets, but nothing has worked to make it smaller. Any suggestions much appreciated! FYI this is the code I am using to make it full-width. If there's a different way to make the carousel full width and full height let me know 🙂
  24. 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>
  25. Site URL: https://www.bailiwickflame.com Hi there Wondering if someone could help with some code to get my full width images on the gallery block on Home Screen to resize for mobile view please. Currently only the middle section of each image is shown in mobile view. Thanks in advance Sam
  • Create New...