Maximum site width

I've been able to add CSS to set max width for the banner and overlay, but it doesn't center the image or work with small screens, AND then I still have to deal with the menu/brand ares (see screencaps).

I'm thinking that setting a maximum width for the site that applies to 

• banner (and overlay)
• menu
• page content
• galleries
• etc.

But I can't seem to track down appropriate CSS. 

(Note: I'm a designer, not a developer or programmer, so this is part of my ongoing learning experience.)

@RatherGood You should share site url to check. Difficult to help with only screenshot.

It's not live... But: https://owl-kale-7yxa.squarespace.com/config/

@RatherGood Your site is private. Please setup password & share url.

If you don't know how to, see here: https://beaverhero.com/squarespace-how-to/#How_to_Setup_Password_Share_Site_URL

Most templates have a site width available in Site Styles. I'd recommend setting it there rather than using Custom CSS.

To view:
https://owl-kale-7yxa.squarespace.com
PW: %%%753

3 hours ago, e2astudio said:

Most templates have a site width available in Site Styles. I'd recommend setting it there rather than using Custom CSS.

Bedford and can't find anything for site/page width

@RatherGood Seems fine here. Did you solve the problem?

add spacer in both side in content. page. check then.

Howdy! If you're trying to fix an image issue - I would edit/crop the image as you want it before adding it to the site. But I'm not sure that's the problem? I actually don't see the image behavior that you're capturing with screenshots so maybe that's been fixed. If you want to limit the width of your content and navigation/site title/logos:

//limit content width ever expanding
#site{
     max-width: 1000px; /*Adjust here.*/
     margin-right: auto;
   margin-left: auto;}
//limit nav/logos/titles
.header-inner {
  max-width: 1000px; /*Adjust here.*/
}

On 10/7/2019 at 3:15 PM, ctmccosh said:

Howdy! If you're trying to fix an image issue - I would edit/crop the image as you want it before adding it to the site. But I'm not sure that's the problem? I actually don't see the image behavior that you're capturing with screenshots so maybe that's been fixed. If you want to limit the width of your content and navigation/site title/logos:

//limit content width ever expanding
#site{
     max-width: 1000px; /*Adjust here.*/
     margin-right: auto;
   margin-left: auto;}
//limit nav/logos/titles
.header-inner {
  max-width: 1000px; /*Adjust here.*/
}

 

This works for the nav, but I still need a max width for banner/banner overlay that doesn't affect small views.

This is what I have for that (I've applied it for preview purposes), but

• small screens look like attached screen cap
• and banner image is aligned top

.banner-thumbnail-wrapper #thumbnail img { 
    max-width: 1400px !important; 
    width: 100vw !important; 
    height: auto !important;
    margin: 0 auto !important; 
    display: block !important; 
    top: 0 !important; 
    }

.banner-thumbnail-wrapper #thumbnail { 
    background-color: #FFF; 
    }

.color-overlay { 
    max-width: 1400px !important; 
    width: 100vw !important; 
    height: auto !important;
    margin: 0 auto !important; 
    display: block !important; 
    top: 0 !important; 
    }

5 hours ago, RatherGood said:

Ah! media screen! So that code only applies above certain screen sizes and leave the image alone for smaller ones, right? 

// looks like it's falling apart around 930px adjust as you need...
@media only screen and (min-width: 925px) {
  .banner-thumbnail-wrapper #thumbnail img { 
    max-width: 1400px !important; 
    width: 100vw !important; 
    height: auto !important;
    margin: 0 auto !important; 
    display: block !important; 
    top: 0 !important; 
    }

.banner-thumbnail-wrapper #thumbnail { 
    background-color: #FFF; 
    }

.color-overlay { 
    max-width: 1400px !important; 
    width: 100vw !important; 
    height: auto !important;
    margin: 0 auto !important; 
    display: block !important; 
    top: 0 !important; 
    }
}

and yay for midwives 🙂

On 10/9/2019 at 2:15 PM, ctmccosh said:

and yay for midwives 🙂

Any way to centre the banner image in the container? 

Hey @RatherGood! Sorry I wasn't aware you replied. If you need more help perhaps you could email me? Thank you! I'm at hello@herz.works