Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
RatherGood

Maximum site width

Question

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.)

 

no-code_normal.png

no-code_wide.png

with-code_small.png

with-code_wide.png

Share this post


Link to post

15 answers to this question

Recommended Posts

  • 0

Share this post


Link to post
  • 0
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

Share this post


Link to post
  • 0

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


Hi, I'm BITTU. A website developer with 8 years experience with Squarespace. if you need help and work with me email me here :- mandeepsquarespace@gmail.com Best Hourly Rate :- $15 Per Hour

Share this post


Link to post
  • 1

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.*/
}

 


founder of herz.works and maker of dope playlists.

Share this post


Link to post
  • 0
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; 
    }

 

Share this post


Link to post
  • 0
5 hours ago, RatherGood said:

2019-10-09 08_57_34-What We Do — Riverdale Community Midwives.png

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; 
    }
}

 


founder of herz.works and maker of dope playlists.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...