WordPress.org

Support

Support » Themes and Templates » [twenty eleven] Adding a second column

[twenty eleven] Adding a second column

  • Hi there

    I am working on this page: http://www.nadaav.com/n

    It is a single column page and I have been having trouble aligning a few photos – changing the text, zooming in, viewing on different browsers, all seem to pull the photos out of alignment. I think the best option would be to make a second column and put the photos in there.

    Is anyone able to advise me if it is possible to add a second column to this page, and use it for photos?

    And if so, how would I go about it? I only want the second column on this specific page, not all my single column pages.

    I am working with a child theme.

    thanks kindly

    NS

Viewing 15 replies - 1 through 15 (of 23 total)
  • goto this file in you theme folder
    http://nadaav.com/n/wp-content/themes/twentyeleven-child/style.css

    add this code

    .wp-caption {
    background: #eee;
    max-width: 96%;
    padding: 9px;
    }

    try this

    WPyogi

    @wpyogi

    Forum Moderator

    Don’t modify the parent style.css file – make any changes in the child theme!

    Thanks WPyogi – as mentioned, I am using a child theme.

    Ravinder, thanks for this code – I have tried it and not had any noticeable effect – what does it do?

    thanks

    Hi savedave,

    Best solution for you will be to attach image with some distance. I mean try adding your second image, “nadaav and crew for singapore citibank commercial”, a few lines below from current.

    Hi Aditya

    Do you really think that is the only option? It’s not an ideal design solution as the pictures will then extend beyond the bottom of the text. This has the additional drawback of negatively affecting the alignment of the linkedin, imdb and filmgraphy links/buttons.

    And if I place the pictures mid text, rather than at paragraph gaps, it seems to force a line break in the text flow.

    All in all, I can’t seem to make that work well.

    Is there a better way?

    thanks

    WPyogi

    @wpyogi

    Forum Moderator

    Try putting that misbehaving image inside a paragraph.

    WPyogi

    @wpyogi

    Forum Moderator

    Or add: “clear: both;” to that problematic div/image.

    Yeah, that’ll be the solution. That’s the same thing I was testing. 🙂

    Hi guys

    thanks for this advice. If I put the photo inside a paragraph it seems to create a paragraph break effect.

    I’d like to try the code suggestion you have made @wpyogi but am not sure I understand where to put it.

    My image code is currently:
    [caption id="attachment_217" align="alignright" width="250"]<img class=" wp-image-217 " alt="nadaav and crew for singapore citibank commercial" src="http://nadaav.com/n/wp-content/uploads/2013/05/photo-300x224.jpg" width="250" height="224" /> nadaav and crew for singapore citibank commercial[/caption]

    What would you suggest I add?

    thanks kindly.

    SD

    Add the following in your child theme’s style.css

    #attachment_217, #attachment_217 {
          clear: both;
    }

    thanks for this – I am afraid I dont notice a difference. I’d show you screengrabs if I could.

    WPyogi

    @wpyogi

    Forum Moderator

    Hey savedave, can you go back to creating a new paragraph for it? Does that work? We can adjust paragraph spacing if that’s the issue.

    hi wpyogi

    can you clarify? Do you suggest I use the code Aditya gave me and then create a new paragraph for the images?

    Currently the image in question does have a paragraph of its own (in the text editor). I have removed Aditya’s code but can replace it if that’s what you are suggesting.

    Thanks again for ALL your help! 🙂

    I just checked again.
    If you used my code (I coded it as instructed by WPyogi), it will mis-align image at bottom.

    @savedave Follow advice of WPyogi (in his last reply).

    Create a paragraph for image, and leave it. WPyogi will take a look, when he have some time.

    paulwpxp

    @paulwp

    Font hero

    Now we have this

    <div clas="alighright"><!--img with caption--></div>
    <p>I do what they say can't be done..</p>
    <p>I direct, write and produce..</p>

    which produces ( as it is now at the time of writing ) those 2 paragraphs with image align to the right, with a side effect to the paragraph and image that come after it resulting in weird uneven layout.

    You can fix this by clearing float to the last paragraph, this is to reset the floating in the document flow.

    So now we will have this

    <div clas="alighright"><!--img with caption--></div>
    <p>I do what they say can't be done..</p>
    <p class="clear">I direct, write and produce..</p>

    2011’s default style doesn’t have a clear float class like 2012, so you could just take this class from 2012 and put in your child theme’s style.css

    /* Clearing floats */
    .clear:after {clear: both;}
    .clear:before, .clear:after {display: table;content: "";}

    For the page you linked to, apply this to 2 paragraphs, and the layout will look good.

    <!--...-->
    <p class="clear">I direct, write and produce..</p>
    <!--...-->
    <p class="clear">In comedy my work is playful ..</p>
    <!--...-->

    Further adjustment for small screen is to make image span full using media query at the breakpoint of your choice.

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘[twenty eleven] Adding a second column’ is closed to new replies.