Full width content in blank section CSS help

Site URL: https://flower-swordfish-kzh8.squarespace.com/

Hi,

I've created a blank section above the store page in order. I would like the content of the section (image and a grid gallery) to fill the width of the page in the same way the product grid below it does, but it seems to be locked at ~50% width. 

If it makes a difference I currently have Fluid Engine Opt Out selected in the hope it would have given me a bit more control of things in the 

The site page is at https://flower-swordfish-kzh8.squarespace.com/all/rings and view code 123456

Any suggestions much appreciated.

Thanks,

Ben

You can use this to Website Tools > Custom CSS

section[data-section-id="66ec013bd6629e0570758be3"] .content-wrapper {
    max-width: 100% !important;!i;!;
}
body {
    overflow-x: hidden;
}

1 hour ago, tuanphan said:

You can use this to Website Tools > Custom CSS

section[data-section-id="66ec013bd6629e0570758be3"] .content-wrapper {
    max-width: 100% !important;!i;!;
}
body {
    overflow-x: hidden;
}

 

Thanks for the reply!

I got a syntax error from that and tweaked to this:

section[data-section-id="66ec013bd6629e0570758be3"] .content-wrapper {
    max-width: 100% !important;
}
body {
    overflow-x: hidden;
}

It seems to align on the left with the rest of the full width content, but on the left it is pushed out beyond. Do I need some padding in [data-section-id="66ec013bd6629e0570758be3"] in order for it to match the formatting for  product grid below?

(Chrome)

(Firefox)

Cheers,

Ben

I think it is fine (Chrome)

The view all store page has a single column gallery section which was already working, the store category pages have the two column section which is sticking to the right hand side, but correct on the left - https://flower-swordfish-kzh8.squarespace.com/all/rings

1 hour ago, iamnibblypig said:

The view all store page has a single column gallery section which was already working, the store category pages have the two column section which is sticking to the right hand side, but correct on the left - https://flower-swordfish-kzh8.squarespace.com/all/rings

Are you using a Classic section? You can change the section width under Section settings without using CSS.

Edit Section > under Design > Content Width > choose S/M/L or click the three dots for a slider. 

Why have you chosen a Classic section over a Fluid engine section? 

Let me know how it goes.

Hi Melody,

Thanks for the reply. I had been trying with the content width options and was on L but didn't allow for the 2 column section to be full width (or at least the same width as the store grid below).

I had enabled classic to see if I could achieve this before messing with CSS and coming to the forums as had seen suggestions that it might be a result of Fluid Engine.

Cheers,

Ben

1 hour ago, iamnibblypig said:

Thanks for the reply. I had been trying with the content width options and was on L but didn't allow for the 2 column section to be full width (or at least the same width as the store grid below).

I had enabled classic to see if I could achieve this before messing with CSS and coming to the forums as had seen suggestions that it might be a result of Fluid Engine.

A fluid engine section will have the same width as your product section below. Unless you have CSS changing the layout of either sections/your website.

Likewise, for a Classic section, setting the Content Width to L will also have the same width as the product section (as your product section is set to full width).

If the section content is not lining up to the product section, then it could be

1) check your content alignment. E.g. is the image block left aligned? Is the gallery block stretched all the way to the edge of the grid.

2) Check your CSS code. I suggest working your way backwards to see if any CSS is unintentionally changing the behaviour of what you are seeing. (e.g. the current behaviour you're seeing with "sticking to the right" is due to the CSS code you've added)

Hope this helps. Let me know how it goes.

1 hour ago, melody495 said:

A fluid engine section will have the same width as your product section below. Unless you have CSS changing the layout of either sections/your website.

Likewise, for a Classic section, setting the Content Width to L will also have the same width as the product section (as your product section is set to full width).

If the section content is not lining up to the product section, then it could be

1) check your content alignment. E.g. is the image block left aligned? Is the gallery block stretched all the way to the edge of the grid.

2) Check your CSS code. I suggest working your way backwards to see if any CSS is unintentionally changing the behaviour of what you are seeing. (e.g. the current behaviour you're seeing with "sticking to the right" is due to the CSS code you've added)

Hope this helps. Let me know how it goes.

These are all the things I had tried before resorting to CSS. I was surprised that a blank section in either Classic or Fluid Engine were not adhering to the width of the store. 

I've got limited CSS on this page relating to hiding the breadcrumbs and standard product category menu, commenting out these pieces of code makes no difference.

With Fluid Engine enabled and recreating the section I still see the same issue of it "sticking to the right".

I managed to stop the issue by changing 

max-width: 100% !important;

to 99% now all seems good.

Thanks all for your help!

Cheers,

Ben

3 hours ago, iamnibblypig said:

These are all the things I had tried before resorting to CSS. I was surprised that a blank section in either Classic or Fluid Engine were not adhering to the width of the store. 

Can you check something for me?

Go to Site Styles (paint brush) > Miscellaneous > Spacing > Page Width (Max). Is your number set to 970px?

Seems like your site margin is set at really narrow. So by default, all your sections are narrow. It seems like the reason your product section is wide is because you have set it to "Full Bleed".

Edit: I tested it with my test site. It seems like there is a difference in behaviour between Full bleed for the store section vs full bleed on blank sections. A bug perhaps?

Doesn't look like with the bug you can use Squarespace's settings to make them line up. But seems that you have solved it with the CSS solution.