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: 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.
  2. 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!
  3. 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; }
  4. 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!!
  5. 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.
  6. 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!
  7. 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; }
  8. 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
  9. 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
  10. 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!
  11. 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!
  12. 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 🙂
  13. 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>
  14. 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
  15. 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>
  16. 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!
  17. How do I display a full bleed Vimeo playlist/showcase? Either horizontal order or vertical order?
  18. Site URL: https://www.crxssplatfxrm.com The navigation on my site runs onto two lines, even when it appears there is plenty of space for it to stay on one line. I guess there is some kind of padding at the sides – how can I remove this? I would prefer that the navination never went to two lines, and if the screen wifth isn't wide enough it would go straight to the burger menu. Is that possible?
  19. Site URL: https://llama-scarlet-7jfe.squarespace.com/projects Hello, I'm looking to make Text in certain sections (under header) to be full width. I do not want it to indent like it does normally. I want it to behave just like a full width header. I'm assuming this would mean removing the orange (see image). I figured out how to remove the orange by going: #yui_3_17_2_1_1645652887174_807 { max-width: none !important; } However on refresh, the id changes. From what I remember a yui changes but a block-yui doesn't? Anyways, I was wondering if someone could help me.
  20. Site URL: http://tobecouture.com password: tobecouture Hi! So I am trying to make the video on my page (2nd section) full-width. I'm not sure which code I need to use to get rid of the padding around the sides! Thanks in advance!
  21. Site URL: https://platinum-dalmatian-n9lk.squarespace.com/ I am trying to have some of my image blocks with text on the side display as full width images ( with no padding on top or bottom or side) however I do not want the text to be full width as it will not have enough padding on desktop and mobile. I used the css code from ghost plugins and it is not working: see below. https://www.ghostplugins.com/steps/full-width-image-card-71-version It stated to put in the page ID where the data-section is: i did that but it is not formatting the image. I also tried the data section id and that did not work. I also removed the 40 padding for text and that did not work. I am on SS 7.1 , (format for the block is height Small, Content Width Large and everything centered aligned.) Last I do not want to this to apply to all images on that page- just certain blocks. Is there a better code to use? // Full Width Image Card - Page Section // [data-section-id="012345"] { 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; } // Full Width Image Card - Mobile Stack // @media (max-width: 800px) { .design-layout-card { flex-direction: column !important; .image-card-wrapper, .intrinsic { width: 100% !important; }}}
  22. 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
  23. Hello, Is there CSS or a plugin that will add text when hovering over images in an images block on a Wells Template page, and going full width. Similar to: https://colleenchrzanowski.com/client-work Here is the page I would like to update with the CSS or Plugin: https://www.andyryanphotographer.com/projects Thanks in advance.
  24. 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.
  25. Hi, I need to create layouts that consist of varying sizes of grids of squares and text, buttons. I'd like to be able to have different backgrounds on each squares - sometimes a solid color (different color on each square), sometimes an image. In front of the color/image I'd like to be able to place text and buttons. I've attached some examples of what I'm trying to achieve. Roger
  • Create New...