Full width image block

Hello!

I would like for my image block to be full width on my homepage, and for no padding to be at the top or bottom. Is there a way to do this? Any help would be appreciated!

site: https://www.uniquelydolledwigs.com

password: unique1234

@paul2009 Hey, I don't want to be a bother but could you also help me with this please. I noticed that banner images don't adjust to mobile screens so I would like to make my image block full width.

Usually, depending on the template and in 7.0 which I think yours is, you go to your home page, then config/design/site styles. click on the image and the menu updates on the left with page'element options that template can change, without code.  

I'm using a 7.1 template 😕 I've tried using some codes to adjust the width but it wasn't making the image full width on both sides. 

From what I can see on my 7.1 lab site, I just add a page, go to edit,  then choose the pencil icon, add image to background, not to a block,  set it for full bleed and it is full width with no border left or right. 

Yes, your right! It makes the image full width but when you view the site on a mobile device, you can’t see the full image. 

Depends which way you turn your phone I bet. 

Which image blocks?

Hey! I changed it to a full gallery slideshow. It's the first picture on my home page. It's not responsive on all devices. It looks small like I want on a mobile device, but on an iPad and web screen its still to big. I used this code to adjust its size on mobile devices (portrait view):

@media screen and (max-width: 757px) {
.gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 27vh !important;
}
}

I would like to change it to an image block and make it full width, but I want it to be responsive on all devices regardless of its screen size or the way you turn the device. Is this possible? 

1 hour ago, Dee12 said:

Hey! I changed it to a full gallery slideshow. It's the first picture on my home page. It's not responsive on all devices. It looks small like I want on a mobile device, but on an iPad and web screen its still to big. I used this code to adjust its size on mobile devices (portrait view):

@media screen and (max-width: 757px) {
.gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 27vh !important;
}
}

I would like to change it to an image block and make it full width, but I want it to be responsive on all devices regardless of its screen size or the way you turn the device. Is this possible? 

use this code for mobile + tablet

@media screen and (max-width: 767px) {
.gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 27vh !important;
}
}
@media screen and (min-width:768px) and (max-width:991px) {
.gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 35vh !important;
}
}

I changed it back to an image block because the full gallery slideshow was too much of a hassle to adjust to all screens. Could you help me make the image block full width please? It's the first picture on my homepage.

I figured it out finally! The code I used:

#block-yui_3_17_2_1_1589941659268_22096.sqs-block.image-block {
    padding: 0px ! important;
  margin-top: -6.7% !important;
  margin-left: -3% !important;
  margin-right: -3% !important;
}

Hi Dee12,

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