Search code examples
htmlcssimagesquarespace

Make Image Full Width of Browser on SquareSpace

I'm building myself a website on SquareSpace and having a bit of trouble with the layout. I've built a few sites before so understand the concept of CSS, and how it's applied to divs etc...

So, I want the page to have full width images (edge to edge in the browser) interspersed with text and graphics.

The banner image and footer image look good, as you can see the image is edge to edge...

enter image description here

The problem is with any additional images I try to add (SS makes you add them inside 'image block' objects), currently it looks like this which is bad, and not edge to edge, shown here with red arrows...

enter image description here

I have spent hours googling about, and testing various solutions and nothing works. I also spent the last 30 mins with SS support and they suggested making a 'gallery page' which you can't add text to so that's totally pointless!

I tried to identify the CSS ID and apply CSS to the image, that didn't work either:

enter image description here enter image description here

Can anyone help?

current CSS not working:

.sqs-block.image-block { padding: 0 !important }

body {    
    margin: 0 !important;
    padding: 0 !important;
}

Cheers John

Solution

  • I didn't find a programmatic solution to this hideous problem. However, I was able to figure out a way to manipulate a SS 'index' style page to achieve the effect I was looking for.