The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

[resolved] 2-column layout for one page (9 posts)

  1. gvirav
    Posted 3 years ago #

    Hi Everyone,

    I'd like to have my blog entry content split into two columns. The good news is it's currently working! The bad news is that every page on the site is now in 2 columns! Here's the CSS I've used to achieve this:

    .entry-content p {
    	-moz-column-count: 2;
            -moz-column-gap: 10px;
    	-moz-column-rule: none;
    	-webkit-column-count: 2;
    	-webkit-column-gap: 10px;
    	-webkit-column-rule: none;
    	column-count: 2;
    	column-gap: 10px;
    	column-rule: none;

    I understand that I'm targeting very broad CSS attributes, which is why everything on the site is affected. My question is, how can I restrict this customization to only affect the blog posts themselves? Note: my blog posts exist on their own page, so I just want my CSS to customize that one page.


  2. WPyogi
    Forum Moderator
    Posted 3 years ago #

    In most themes, the body tag has a page-specific class or id which you can use to target the CSS to that page only. What's in the rendered HTML code for the body tag on that page?

  3. gvirav
    Posted 3 years ago #

    Thanks for the response! I forgot to mention that I've made a custom theme which is a child theme of twentytwelve.

    I'm seeing <body class=" customize-support"> for every page. Unfortunately, I can't pick out anything unique to allow me to target that specific page.

  4. WPyogi
    Forum Moderator
    Posted 3 years ago #

    Well, that's not how twentytwelve is coded - so you must have changed something in the header.php file? This is the header.php for it:

    <body <?php body_class(); ?>>

    and the output is something like this:

    <body class="home blog custom-background custom-font-enabled single-author">


    <body class="page page-id-2 page-template-default custom-background custom-font-enabled single-author">

    depending on the template and page...

  5. gvirav
    Posted 3 years ago #

    Ah yes! I did change the header.php for my theme and didn't transfer over the <body <?php body_class(); ?>> in the process. I just had a plain old <body> tag. Now the body tag for my news page reads:

    <body class="home blog logged-in admin-bar custom-background custom-background-white custom-font-enabled single-author customize-support">

    Do I need to target that verbatim in my CSS file? Thanks again for your help!

  6. WPyogi
    Forum Moderator
    Posted 3 years ago #

    Just use the class "home" as part of the CSS selector for the styles you are adding.

  7. gvirav
    Posted 3 years ago #

    That did the trick! Thank you so much for your help!

  8. WPyogi
    Forum Moderator
    Posted 3 years ago #

    You're welcome! It's a handy way to use CSS...

  9. gvirav
    Posted 3 years ago #

    Marking this as resolved.

Topic Closed

This topic has been closed to new replies.

About this Topic