Jump to content

Full width image block

Recommended Posts

Posted

@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.

Posted

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. 

Posted (edited)

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. 

Edited by derricksrandomviews
Posted

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? 

Posted
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

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.

Posted

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;
}

 

  • 1 year later...
Posted (edited)

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

Edited by codeandtonic
links

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.