Change page width different for each page of website

  • Resolved EldertSijmons

    (@eldertsijmons)


    10 years, 11 months ago

    I am a novice when it comes to CSS, I know enough to be dangerous.
    I would like to find out how I can specify for one page of my webpage to have a different width then the rest of the pages.

    For example, I used the following CSS to change the width:

    #wrapper {
    width: 100% !important;
    overflow: hidden;
    }

    This is changing the width for all pages. However, there is one page I want the width to be for example:

    #wrapper
    {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    }

    How can I achieve this?

Viewing 8 replies - 1 through 8 (of 8 total)
  • WPyogi

    (@wpyogi)

    10 years, 11 months ago

    You can generally use the page-specific class that’s generated in the body tag – look at the HTML for the page – inside the body tag – i.e. something like:

    <body class="page-id-75" ....other stuff typically>

    Then CSS:

    body.page-id-75 #wrapper {
   styles for that page;
}

    Michael

    (@alchymyth)

    10 years, 11 months ago

    your theme might be using body_class() which outputs a page specific css class into the body tag; http://codex.wordpress.org/Function_Reference/body_class

    in this case, you can simply use (example):

    .page-id-123 #wrapper { }

    alternatively, you might need to use a conditional statement to add specific styles into the head section of header.php (?) of your theme; http://codex.wordpress.org/Function_Reference/is_page

    example:

    <?php if( is_page(123) ) { ?>
<style type="text/css" media="screen">
	#wrapper {  }
</style>
<?php } ?>
    Thread Starter EldertSijmons

    (@eldertsijmons)

    10 years, 11 months ago

    Awesome! Thank you guys for the responses.

    Thread Starter EldertSijmons

    (@eldertsijmons)

    10 years, 11 months ago

    Ok, not quiet there yet. I am using a child theme and based upon what you are suggesting this is what I placed into the CSS based upon what I found in the HTML:

    (HTML)
    <body id=”themebody” class=”page page-id-9 page-child parent-pageid-32 page-template-default logged-in”>

    (CSS)
    .page-id-9 #table {
    margin-left: auto;
    margin-right: auto;
    }

    I used the table div to try to center a table.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 11 months ago

    You have a div:

    <div id="table">

    ??

    If you’re trying to centre the table, just apply the left and right auto margins to it directly.

    WPyogi

    (@wpyogi)

    10 years, 11 months ago

    Does the table have the id of table assigned to it?

    Also, margin: auto only works if you specify a width less than the containing element OR use display: table; with the margin: auto; centering.

    Michael

    (@alchymyth)

    10 years, 11 months ago

    please post a live link to the (web) page with the problem.

    without seeing the issue, this is all guesswork…

    Thread Starter EldertSijmons

    (@eldertsijmons)

    10 years, 11 months ago

    Ok. This is the link:

    http://kfiphotography.com/information/about/

    However I got it to work. Thank you all for your help.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Change page width different for each page of website’ is closed to new replies.