[twenty eleven] Adding a second column

goto this file in you theme folder
https://nadaav.com/n/wp-content/themes/twentyeleven-child/style.css

add this code

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

try this

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

Try putting that misbehaving image inside a paragraph.

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="https://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.

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.

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.