How do I keep flexbox center justified even with min-width.

Site URL: https://www.jeremyleegibbs.com/

I want the layout of my pages to stay constant/proportional at all sizes outside of the mobile design. So far I have tried everything I can think of but the layout seems to always break down at the extremes. I have managed a poor work around by setting a min width:

@media all and (min-width:640px) {
.sqs-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1024px;
  }

However, when the browser hits the 1024px mark the content of my sub pages is no longer centered. How would I go about keeping the content centered at smaller sizes with the same effect.

If anyone has suggestions they would be much appreciated.

Thank you.

Use @media to remove padding and spacers as the width of the screen decreases.

You can also use transform: scale() to shrink the entire block so it stays how you want.

You are pretty much trying to override squarespaces dynamic sizing, so its going to take a bit of work.

1 hour ago, rwp said:

Use @media to remove padding and spacers as the width of the screen decreases.

Oh awesome! I hadn't even considered that! I'll play around with the sizing and see if I can make it work. Thanks so much!

When I set it up to remove spacers:

@media only screen and (max-width:1024px) {
.sqs-block.spacer-block { 
   display:none !important; }}

the spacers become invisible but the layout seems unaffected.  Is display: none the wrong expression for this scenario?

I will look into this in a bit. This is a complex fix.

Try this out, this will only do the first section.

@media screen and (max-width:1200px) and (min-width:640px) {
  #photography-1 #page-5f35c573422a312d8302395a .sqs-col-2 {
    width: 10% !important;
  }

  #photography-1 #page-5f35c573422a312d8302395a .sqs-col-4 {
    width: 40% !important;
  }
}

@media screen and (max-width:1050px) and (min-width:640px) {
  #photography-1 #page-5f35c573422a312d8302395a .sqs-col-2 {
    width: 5% !important;
  }

  #photography-1 #page-5f35c573422a312d8302395a .sqs-col-4 {
    width: 45% !important;
  }
}

@media screen and (max-width:925px) and (min-width:640px) {
  #photography-1 #page-5f35c573422a312d8302395a .sqs-col-2 {
    width: 0% !important;
  }

  #photography-1 #page-5f35c573422a312d8302395a .sqs-col-4 {
    width: 50% !important;
  }
}

@media screen and (max-width:825px) and (min-width:640px) {
  #photography-1 .Index-page-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: scale(0.9) !important;
  }
}

@media screen and (max-width:725px) and (min-width:640px) {
  #photography-1 #page-5f35c573422a312d8302395a .sqs-col-4 h1 {
    font-size: 6vw !important;
  }

  #photography-1 #page-5f35c573422a312d8302395a .sqs-col-4 h3 {
    font-size: 3.5vw !important;
  }
}

2 hours ago, rwp said:

I will look into this in a bit. This is a complex fix.

Dude! Thank you so much! I literally just started learning CSS last week and this has had me incredibly frustrated. I had no idea what to target and looked everywhere but this makes it way clearer. I really appreciate it! I still need to play around with the numbers for stepping it down and everything but this was a massive help!

Happy to help.