Flowing text alongside images

[tatami]

I'm using the eleven40 Pro theme and I have two formatting issues I'm looking for help with. Both occur when text runs (or tries to run) alongside images.

The first is that block quotes refuse to start alongside images. Instead, there's a great, gaping gap between the end of a paragraph and the beginning of the block quote. You can see this at http://aenigma-images.com/2015/09/veruschka-and-rubartelli/ next to the image of Rubartelli and Veruschka relaxing. It occurs when the browser window is wide enough to let text flow alongside the image.

The second issue is that bullet point don't indent properly when flowing down the side of an image. You can see this at http://aenigma-images.com/2015/07/perc-westmore/.

These issues are really bugging me and I'd appreciate any advice on how to resolve them.

Thanks in anticipation

Philip

http://www.aenigma-images.com

[Brad Dalton]

1. I assume you want to wrap the quote like the text around the image?

Here's the default quote CSS:

blockquote {
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 40px;
    margin-right: 40px;
    display: inline-block;
}

blockquote,
blockquote::before,
blockquote::after {
    color: #999
}

blockquote::before {
    content: "\201C";
    font-size: 30px;
    height: 0;
    position: relative;
    float: left;
    top: -20px;
    left: -20px;

}

blockquote::after {
    content: "\201D";
    font-size: 30px;
    height: 0;
    position: relative;
    float: right;
    top: -40px;
    right: -25px;

}

You can modify that or use it to create a custom block quote specifically for use when wrapping the quote around an image.

2. And the same with the list types:

---

Tutorials for StudioPress Themes.

[tatami]

Brad

Thank you for your help.

The good news is that I've now got both quotes and bullets flowing around images.

Unfortunately, though, in both cases the padding (if that's the right term) disappears. So instead of quotes and bullets being indented as they are elsewhere, they left-align with the body copy. I'm not too bothered whether they left-align or indent so long as there's consistency. Can you help me with that? I'm really struggling here.

Here's the updated code I'm using for block quotes, which you can see in action at http://aenigma-images.com/2015/09/veruschka-and-rubartelli/:

blockquote {
margin: 40px 40px 24px;
display: block;
}

blockquote,
blockquote::before,
blockquote::after {
color: #999
}

blockquote::before {
content: "\201C";
font-size: 30px;
height: 0;
position: relative;
float:left;
top: -20px;
left: -20px;
}

blockquote::after {
content: "\201D";
font-size: 30px;
height: 0;
position: relative;
float: right;
top: -40px;
right: -25px;
}

And here's the updated code for bullets/lists, which you can see in action at http://aenigma-images.com/2015/07/perc-westmore/:

}
ol,
ul {
margin: 0;
padding: 0;
}

I've added to that like this:

ol,
ul {
margin: 0;
padding: 0;
position: relative;
padding-left: 0; /* remove any left padding */
margin-left: 0; /* remove any left margin */
left: 18px;
}

I really appreciate your help here.

Thanks and best wishes

Philip

[Author]

Posts