WordPress.org

Ready to get started?Download WordPress

Forums

[twenty eleven] Adding a second column (24 posts)

  1. savedave
    Member
    Posted 1 year ago #

    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

  2. Ravinder Kumar
    Member
    Posted 1 year ago #

    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

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  4. savedave
    Member
    Posted 1 year ago #

    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

  5. Aditya Pandey
    Member
    Posted 1 year ago #

    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.

  6. savedave
    Member
    Posted 1 year ago #

    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

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Try putting that misbehaving image inside a paragraph.

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  9. Aditya Pandey
    Member
    Posted 1 year ago #

    Yeah, that'll be the solution. That's the same thing I was testing. :)

  10. savedave
    Member
    Posted 1 year ago #

    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

  11. Aditya Pandey
    Member
    Posted 1 year ago #

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

    #attachment_217, #attachment_217 {
          clear: both;
    }
  12. savedave
    Member
    Posted 1 year ago #

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

  13. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  14. savedave
    Member
    Posted 1 year ago #

    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! :)

  15. Aditya Pandey
    Member
    Posted 1 year ago #

    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.

  16. paulwpxp
    Font hero
    Posted 1 year ago #

    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.

  17. savedave
    Member
    Posted 1 year ago #

    Thanks for this.

    Accidentally I seem to have found an alternative, possibly temporary solution - let me know if you think it will do the job.

    In this code:

    .singular .entry-header,
    .singular .entry-content,
    .singular footer.entry-meta,
    .singular #comments-title {
        width: 85%;
    }

    I increased width to 90%.

    I did this for another reason but it seems to have solved the problem, surprisingly - at least it does on my browsers.

    Do you think this is an adequate solution to the problem - I am not really sure why it fixed things and if I change the text I wonder if the alignment will go out again...

    SD

  18. paulwpxp
    Font hero
    Posted 1 year ago #

    Do you think this is an adequate solution to the problem - I am not really sure why it fixed things and if I change the text I wonder if the alignment will go out again...

    Changing width of element doesn't clear the float. Should you ever rewrite that article taking out some sentences or paragraphs or words, the proportion will be off again.

  19. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Paul's solution above really is the best way to go - it corrects the fundamental problem.

  20. savedave
    Member
    Posted 1 year ago #

    Thanks. I'll have a try. I got scared when I saw that much code!

  21. savedave
    Member
    Posted 1 year ago #

    So if I understand correctly, Paul you suggest adding this code to style.css

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

    Which I have now done.

    I am not sure what you mean about applying this code to two paragraphs:

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

    I presume you mean adding <!--...--> before and after each of the two paragraphs starting "I direct, write..." and "In comedy my work..."

    Is that correct?

    As for the first two pieces of code you wrote, am I write to assume I can ignore those - they will be the results of correctly following the rest of your instructions?

    Sorry if I am asking newb questions and thanks so much,

    SD

  22. paulwpxp
    Font hero
    Posted 1 year ago #

    Actually you don't put <!--...--> there, it stands for whatever something already there, the point is the <p> that needs to have class="clear".

    Any <p> that needs a clearfix, make it <p class="clear">.

  23. savedave
    Member
    Posted 1 year ago #

    I see. So to clarify, all I need to do is add the CSS to my stylesheet (which I have done), and in the text editor add <p class="clear"> before each paragraph that is causing a problem.

    Have I understood this time?

    thanks

  24. paulwpxp
    Font hero
    Posted 1 year ago #

    Yes. Write post normally. When you're done with the post, switch to Text Mode, you would see all the tags <p> put there by WP automatically.

    All you have to do is put in class="clear", to any <p> that needs resetting the float for things that comes after.

Topic Closed

This topic has been closed to new replies.

About this Topic