WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. gvirav
    Member
    Posted 1 year 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.

    Thanks!

  2. WPyogi
    Volunteer Moderator
    Posted 1 year 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
    Member
    Posted 1 year 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
    Volunteer Moderator
    Posted 1 year 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">

    or

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

    depending on the template and page...

  5. gvirav
    Member
    Posted 1 year 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
    Volunteer Moderator
    Posted 1 year ago #

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

  7. gvirav
    Member
    Posted 1 year ago #

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

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  9. gvirav
    Member
    Posted 1 year ago #

    Marking this as resolved.

Topic Closed

This topic has been closed to new replies.

About this Topic