How to fix CSS order for images vs blockquotes in Rowling theme

  • sa40test · Member ·

    I have noticed a couple of things in the Rowling WordPress theme that are not desirable, and I’m sure that there’s probably an easy fix for them in CSS, but I’m not sure how to implement them.

    Both issues arise with respect to the blockquote CSS in posts.

    Issue 1: If an image is posted and a blockquote comes after it, then the blockquote can cover up the image in part.

    An example of the Issue 1 is in the following post: https://wheatandtares.org/2016/10/03/church-broke/

    At the first blockquote, you can see that there is an image that was posted before the blockquote, but which is ‘covered’ by the blockquote.

    Issue 2: If an image is posted within a blockquote, then the image does not show up in the blockquote at all (there is a blank space where the image would be.)

    For an example of this second issue, see:
    https://wheatandtares.org/2016/09/26/hales-on-the-law-of-adoption/

    The 7th blockquote (the one that begins ‘From 1877 until the close of 1893’) has a right-aligned image, but currently that is hidden because it’s underneath the blockquote.

    My thoughts are that there is something relating to the quotation marks at the beginning of blockquotes that causes images to be hidden underneath the blockquote. I kinda like the quotation marks, so I don’t necessarily want to get rid of them, but I would like for the images to be visible.

    Does anyone know how to accomplish this using CSS (since I do have the premium upgrade)

    The blog I need help with is: (visible only to logged in users)

  • innisfreehomestead · Member ·

    Hey there!

    Issue 1: If an image is posted and a blockquote comes after it, then the blockquote can cover up the image in part.

    .post-content blockquote {
	clear: both;
}

    Issue 2: If an image is posted within a blockquote, then the image does not show up in the blockquote at all (there is a blank space where the image would be.)

    .post-inner figure img, .post-inner figure .wp-caption-text {
    z-index: 9999 !important;
    position: relative;
    }

    Let me know if that doesn’t work,
    Sage

  • innisfreehomestead · Member ·

    (apologies, second code block not in a code box)

  • sa40test · Member ·

    sagebrownwell,

    Thanks so much. The first issue is resolved…however, the code to solve the first issue actually interferes with the 2nd issue. The code for the first issue pushes images that should be within blockquotes out of the blockquote. (However, if I comment out the 1st issue’s code, then the 2nd’s works appropriately.)

    I’m thinking that there should be a way to make the site ignore the 1st issue’s code whenever it encounters an image that should properly be within a blockquote.

  • innisfreehomestead · Member ·

    Hey there,

    Sorry about that! The problem I see now is that the image in the blockquote isn’t actually rendering inside the blockquote and that causes issues. There isn’t much else I can do in the CSS to fix that though I do have a workaround if you’d like?

    Take out the first code that I gave you (with the .post-content blockquote), leave the second code there though.

    If there are any blockquotes that are overlapping images above them then place this code directly above the blockquote in the text editor:
    <div class="quotetop"></div>

    And this code into the CSS: 

    .quotetop {
	clear: both;
}

    It is slightly inconvenient as you would need to place in that code wherever the overlaps occur but it should solve both your problems.

    Let me know if that doesn’t work for you,
    Sage

  • sa40test · Member ·

    I think the main issue will be that this is a group blog, and most of the other bloggers will not remember to use the div tag. I think that I will just advise the others not to put images so close to a blockquote that there will be overlap.

  • sa40test · Member ·

    Oh, I think I have something that could work…Instead of changing the z-index for the images, I decreased the z-index of blockquotes. So, I wrote:

    .post-content blockquote {
	z-index: -1;
}

    This probably isn’t perfect, but it does make sure that any image goes above a blockquote.

  • innisfreehomestead · Member ·

    Hey there,

    That’s great to hear you found a solution!

    Let me know if you need anything else,
    Sage

  • The topic ‘How to fix CSS order for images vs blockquotes in Rowling theme’ is closed to new replies.