Bedford: How can I increase the page width?

Anyone have some simple CSS to widen to overall page/content width in Bedford?

Thanks!

The in-built max width is 1020px, so you could try something like this in the Custom CSS Editor:

#page { max-width: 1300px }

Perfect! Thank you so much!

This code works for me:

#page, #content {max-width: 95% !important;}

This works great on many of my pages, thanks! Can you suggest any CSS for overriding the Index width?

It doesn't seem to work on Shift .... :(

@palosanto markup can vary from template to template. CSS code snippets are not interchangeable. Ask a new question if you'd like some help with Shift.

@tryingtobehelpful FYI: since

#content

is inside

#page

it's not necessary to include it as well. It could also cause unintended side effects when a sidebar is enabled within a blog collection.

Using the code: #page, #content {max-width: 95% !important;} Or even using it without the content tag, is there a way to make this code specific to a certain page?

I'm looking to use a standard page with a summary grid to re-create a blog page, but one with blog summaries that have images in them. Only thing is, I want to increase the content width to include a sidebar for an archive/search option. When the content is normal sized it's a little crammed. So ideally I'd like to widen this one page, but leave the content on the rest of the pages the normal width.

The page's name is news. I've tried replacing the #page code to #news, but it didn't work. Any help would be greatly appreciated.

Thanks!

I have found a way to assign the CSS to a particular page. In place of 'page' you need the 'body id' of that particular page. If you navigate to your page in chrome and hit Ctrl+U you'll bring up the page source. Ctrl+F to open search and enter 'body id'. On the same line as 'body-id' you'll find something that looks like 'collection-........' with an alphanumeric string after it. Paste that as your 'page'.

I've tried this over and over in Bedford, following the instructions to a t and I can't get it to work! My page here looks so squished and unnecessarily narrow! http://www.bluebirdicecreamery/sundaes

Please help!!!

Hi Stanante. I found this chain and have a question. I am trying to target a specific page but am getting a sytanx error. You suggested replacing "page" with the "body id".

My body ID is "collection-5a0c6bcbf9619a2a36830f8a"

So my code, replacing #page, with the body id is

 <style>
#collection-5a0c6bcbf9619a2a36830f8a  {
   max-width: 1300px;
}
</style>

But I'm getting syntax error.

Hi Stanante,

I can't seem to find the page ID. "Body id" doesn't bring up anything in the code. Would you mind helping me find it for this page?

https://www.covidphotoconversations.com/images

Thanks!

Rachel

@racheljackson

You can do this right through the SS interface for the Native template.

1280px is the max you can get with the slider control.

However if you type the number indirectly you want go higher.

You can even use different units.