Wanted to share some tips since I've helped thousands of users with this exact problem.
I've also written a blog post 5 Ways to make full-width blocks in Squarespace. I'll try to update that. I'm now investigating a new method which I haven't fully gotten to work.
Here is the code.
#block-yui_3_17_2_1_1640294879004_4287{
width: 100vw ;
position: relative ;
left: ~"calc(-50vw + 50% - .0vw - 17px)";
// en ymmärrä. content wrapperis pitäs olla 6vw mut 0 toimii... 🤷♂️
}
@media only screen and (min-width:768px) and (max-width:1276px){
#block-yui_3_17_2_1_1640294879004_4287{
width: 100vw !important;
position: relative !important;
left: ~"calc(-50vw + 50% - 3.0vw - 17px)" !important;
//moving 50% of parent container = left edge is in the middle of the browser
//-50vw takes element's 'left edge from middle of browser to left edge of browser
//- 3.0vw is the .content-wrappers default padding-left we gotta take into account
//17px is the SQSP default block padding/margin
}
}
There are some screen widths where it does not yet work. At least wider than 1276px but narrower than something. I'll let you know if I make more progress. I'm worried that changes to templates might break this easily so the other methods, javascript calculations or full-width section are definitely more reliable and less likely to break in the future.
Little self-promotion: I've also coded a Squarespace Full-Width Blocks Plugin. If you're willing to pay a bit, that's the easiest route for Squarespace 7.0.
For 7.1 The currently best method is done with these steps
The Squarespace 7.1 method works like this
1. Create a section for the full-width content. So you'll create a section just for the full-width image, video, whatever.
2. Check the section data-ID. You can use the Squarespace ID Finder Chrome Extension to find that.
3. Use CSS to remove the horizontal padding of that section and it's .content-wrapper element
4. remove the block paddings with [class*=sqs-col] .sqs-block inside your full-width section
5. The .sqs-row has a negative 17 px margin. Use CSS to set the margin to 0 or the block will be wider than the screen. We want full-width, not wider than full-width 🙂
6. Image blocks for example have a 2500px max-width in an element with .intrinsic -CSS class. Use CSS unset for that.
7. Also remove the vertical padding in the section and the content-wrapper
This video is for my plugin but shows how it works:
My full-width plugin will also include the 7.1 full-width code
Hi there,
Has anyone got an idea of how to make the event thumbnail show on a calendar block at all times regardless of the sizing of the block?
I would like to have my calendar block side by side with a form and the thumbnails don't show when the calendar block is made smaller.
I have disable the flyout so I'm hoping there is a way to do this so I can have the smaller calendar rather than full width.
Any help would be greatly appreciated - I have considered acuity but i want to be able to screen people before booking them in 🙂
BeaRue reacted to tuanphan in Post Title link to Source URL, but in new tab?
