Header and Portfolio Grid not aligning to body/footer at certain widths.

Hi, 
The website is nice and responsive to width scaling except 2 elements, the header and portfolio grid simple.
*its a inset layout not full.

1. at full width everything is aligned how it should

2. Start reducing width and the header starts taking off out of the alignment, but footer and body remain perfect

3. start pushing the width even further and the header looks horrible and is flush to each side of the window, but the footer and body look perfect

4. This happens also on the porfolio grid, it goes out of alignment with the header. the footer is perfect always.

My question is how can i make the header and portfolio grid behave the same as the footer and stay in the required alignment it starts as full width? 


web: https://ellipse-teal-dl5w.squarespace.com/
pass: 2

Thanks 
 

1. Click EDIT, then go into your "Site Header".
2. Click, the desktop icon (middle icon)
3. Under WIDTH, Click "inset" instead of Full.

Yup already set to inset in the site header, there lies the issue I'm having I cant work out why it only does inset sometimes.
Was hoping there was some code to keep it in check. thanks
 

@DPruitt
It might have something to do with this code, hope this helps:

@media only screen and (min-width: 1656px) {
	.tweak-portfolio-grid-basic-width-inset .portfolio-grid-basic {
		padding-left: 0 !important;
		padding-right: 0 !important;
		width: 1600px !important;
    }
    
    .header-width-inset .header-inner {
		width: 1600px !important;
    }
    
    .header .header-announcement-bar-wrapper {
		padding-left: 0 !important;
		padding-right: 0 !important;
    }

}

this code was to help the gallery block align to the header in inset mode because it looked like this before the code:

Probably be easier if you just invite me into the site with Admin rights:
derek@derekpruitt.design

I would say all of that code can probably be removed as it looks custom.  The inset option alone should be flushing everything accordingly.  There maybe one setting where you need to set a "max-width" not a width code.  If you tell it "width" you're telling it to be 1600px wide on all screen devices.

thanks appreciate the help, sent a invite

I have access; Everything looks flushed now?

the header and portfolio grid are still not aligning. did you change some css?

https://www.loom.com/share/5a63ef9c4430460899809ebcc9fdacc0?sid=bea2cbca-6702-4701-86a0-649a90440aca

Check link; I'll keep looking

I went ahead and removed some of the code and pasted it to a notepad for now.  Can you check the site again to see if that solved your issue?  I did notice on a certain test that the header was acting funky from the custom padding css.

Yes the header is fixed thankyou

i was just making this video as you fixed it. only issue is the porfolio grid now. the header looks great.
any idea how to fix the portfolio grid popping out?

thanks again for your time

Fixing a few more issues and rewriting a few codes now... one moment..

Okay go ahead and hit refresh; I think I got it pretty close:

/* align portfolio pagination */

.item-pagination[data-collection-type^="portfolio"] {
    max-width: 1656px;
    margin: 0 auto;
}

@media screen and (min-width: 1656px) {
.content
{padding-left: 8vw;
  padding-right: 8vw;}

.tweak-portfolio-grid-basic-width-inset .portfolio-grid-basic
{padding-left:0px!important;
padding-right:0px !important}
}

FYI, this was placed in the Header Injection of all 3 portfolio index pages so that it wouldn't affect the rest of your pages across your site.  This way it will keep your site dynamically functioning in the backend and other areas across your site.

Everything is fixed thank you for that, except its created one more new issue now with the middle information on pages:

information gets cut off now, where it didn't before:

the information at certain widths doesn't align with the header/footer. which didn't happen before:

sorry for this last part, everything is so close to working though

I removed my code and it was still doing it so this appears to be a separate issue...

Checking to see what I can find; all of my codes are for 1656px+.

Okay check again

MAGIC. thank you so much for that. looks perfect!

Thanks i learnt alot looking at this code also