Wordpress site- code to widen content area of a specific page please?

dinneenp · 10-09-2014 8:03am #1

Hi,
I have a Wordpress website, bought a theme and the developer doesn't help with customization.
I managed to widen the content area of blog pages- .blog-post, .content { width: 1000px; }
But I'm trying to figure out the code to widen specific pages (e.g. http://www.photoblog.ie/about/) but it's not working for me. Would anyone be able to help.

I thought it'd be .pagename .content and {width}
I'm tried without the .content too but it didn't work

.about, .content { width: 1000px; }
.about { width: 1000px; }

Thanks,
Patrick

rovoagho · 10-09-2014 8:26am

All wordpress themes are different, you'll need to post the relevant code or a link to the site. EDIT: Feck, you did. Was that there all the time? I would've sworn there was no links when I first looked.

EDIT: Also, many themes provide multiple templates, one of which is often "full width". You can change templates in one of the panels on the right on the Edit Page screen.

Kenny Logins · 10-09-2014 8:31am

If it can't be done in the theme itself, there is a way you can alter the CSS by page ID (Wordpress internal page numbering), but I can't remember how... Wordpress forums have the answer to everything.

mrmac · 10-09-2014 8:54am

That page dynamically adjusts to the screen size, so it could either be controlled by specific element styling, or by CSS.

Have a look for something like this:

<link rel="stylesheet" media="(max-width: 850px)" />

or, in CSS, something like....

@media (max-width: 850px) {
something:something;
}

btw - the max width of the element you're looking for is 850px. I do understand that you may wish to increase it to 1000px, but it doesn't really bother me.

HTH

daymobrew · 14-09-2014 10:31pm

The responsive part is in responsive.css.
The container width for larger screens is in http://www.photoblog.ie/wp-content/themes/vernissage/css/layout.css:

.container, .content {
    float: right;
    margin-bottom: 10px;
    margin-top: 175px;
    padding: 25px 0;
    position: relative;
    width: 850px;
	clear: both;
    display: block;
	-webkit-border-radius: 6px;    
    border-radius: 6px;
}

Add the following block to target the about page:

.page-id-2159 .container { /* /about/ page */
  width: 1000px;
}

was.deevey · 15-09-2014 3:54am

You could also create a new template for each page you want to re-style.

Create a new copy of the page template and call it something like wide.php
add the following code at the top e.g.

<?php
/*
Template Name: About Page
*/
?>

And code the individual style(s) unique to that page e.g.

<div style="content-wide">

Amend the styles to reflect in the CSS

Then you can just use the template selector on each page to apply your new page type to any page requiring editing.

dinneenp · 16-09-2014 12:00pm

Thanks; I'm going to try some of the proposed tips.

I thought it would have been simple since the only code I added to widen the blog page was .content { width: 1000px; } in the 'custom CSS' field

dinneenp · 16-09-2014 2:02pm

daymobrew wrote: »
The responsive part is in responsive.css.

Add the following block to target the about page:
.page-id-2159 .container { /* /about/ page */
  width: 1000px;
}

Thanks; works a treat! (I'm using it for a page I haven't published yet)

Wordpress site- code to widen content area of a specific page please?

Comments