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

Bedford: Page-Content area, CSS width control. How do I adjust this?

Question

17 answers to this question

Recommended Posts

  • 2

Bedford uses max-width to set the width of the content area. To adjust this, override with your own value using this code snippet (added to the CSS Editor):


#page { max-width: 1020px; }

Change '1020px' to your preferred value.

Edited by eanderson

Template Developer at Squarespace, @esquareda on Twitter.

Share this post


Link to post
  • 1

So, i'm using pacific which should be similar. I am having trouble achieving the desired result. I only want one page to have an expanded width. that page is home as the first page in my index.

I can increase the width by doing :


#page{ max-width: 100%;}

However, using


#home{max-width:100%;} 

does not work

Should i be using something else in place of #home?

Edited by jseltz

Share this post


Link to post
  • 0

I tried this but the content (in my case a gallery) extended to the right instead of centering itself on the screen. So I ended up with a gallery that ran off the right of the page. Any ideas on how I can center it?

Here's what I have nowwww.alexbroadstock.com/people

Thanks!

Share this post


Link to post
  • 0

@acbroadstock and @geekgirlweb - rather than the #content element, Bedford actually sets the page max-width on the element just above - #page. See my answer for the correct CSS snippet.


Template Developer at Squarespace, @esquareda on Twitter.

Share this post


Link to post
  • 0

@eanderson

I am having a similar issue with the movie playing on my homepage, where I want the movie to be larger and CENTERED above the content below it. I tried putting in your code suggestion of

page { max-width: 1020px; } but it didn't do anything different. Can you take a look and provide any suggestions to center the video on the page? Thanks so much!

Michael

www.eucalyptusfilms.com/Answered 17 mins ago by mhorwitz 1

Share this post


Link to post
  • 0

Ok just tested and you have to do something else - you page in index has a unique name #something - so to alter only a page with for this video add a video as a regular block and paste this into CSS:


#you-page-title .page-content 

{
max-width: 2000px;
margin: 0 auto;
padding:0px;
}

And done. Example here http://bit.ly/1RLeWgj


X-Gen born digital. Food Enthusiast. Traveler.

Share this post


Link to post
  • 0

Check my answer @mhorwitz - should work perfectly well

Edited by GRSM

X-Gen born digital. Food Enthusiast. Traveler.

Share this post


Link to post
  • 0

This does not work on my hayden template website. treadawaytraining.com/member-area is the page I am trying to make larger. I've included a picture of what it looks like now. I want that box to span the width of the page.alt text

member-area-integration.png.099593c69adf3399c3bab5e54cd5e9d7.png

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