Docs

[clefler]

Hi,
I got some help previously to align blockquotes when there are featured images but when I decided to use the cite feature it looks like the attached image…the cite gets put off to the side.
Anyway to fix it?

Here is a page with the effect towards the bottom:

Discipleship Ministries – United Faith Church

Here is my current blockquote customization and featured image customization:

blockquote {
font-family: ‘Open Sans’, Arial, Helvetica, sans-serif;
font-style: italic;
font-size: 16px;
border-left: 8px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
}

.single .entry-featured {
float: left;
max-width: 300px;
width: 30%;
margin-right: 2em;
}

.mtn{
float: left;
max-width: 300px;
width: 30%;
margin-right: 2em;
}

[Lely]

Hello There,

Thank you for posting in. Upon checking, the issue is caused by the following custom CSS:

.has-post-thumbnail blockquote{
  display:grid;
  display:-webkit-box;
  display:-moz-box
}

Please remove that and then try again.

Hope this helps.

[clefler]

Unfortunately if I remove that then the original issue shows up again, the featured image and blockquote overlap.

[Jade]

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[clefler]

This reply has been marked as private.

[Lely]

Hello There,

Please update this custom CSS:

.mtn {
    float: left;
    max-width: 300px;
    width: 30%;
    margin-right: 2em;
}

To this:

.page-id-1146 .entry-featured{
    float: left;
    max-width: 300px;
    width: 30%;
    margin-right: 2em;
}

By default, mtn will set top margin to zero. Above re-declaration will cause issues every time you use mtn.

Then also update this:

.has-post-thumbnail blockquote{
  display:grid;
  display:-webkit-box;
  display:-moz-box
}

To this:

.has-post-thumbnail .entry-content> blockquote:first-of-type {
    display: grid;
    display: -webkit-box;
    display: -moz-box;
}

This line: .has-post-thumbnail .entry-content> blockquote:first-of-type will make sure that it will only affect the first blockquote with overlapping issue.

Hope this helps.

[clefler]

Hey thanks so much for the detailed review.
Does it have to call out a specific page?
I will test….

[Joao]

Hi,

Test and let us know how it goes.

If you want to call out the specific page you need to use the “.page-id-” before the code like on the example below.

.page-id-1146 .entry-featured{
    float: left;
    max-width: 300px;
    width: 30%;
    margin-right: 2em;
}

Let us know if you need further help,

Thanks,

Joao

[clefler]

None of the changes seem to be working:
Here is a post that uses the block/cite shortcode and the citation is misaligned.

[Rupok]

Hi there,

You need to add right page ID since the above one is just example. Provide us an exact page URL where you want to add this.

Thanks

[clefler]

I would like it to be for every post. Pages I will edit with cornerstone and will not use the featured image. But posts I would like them all to start with a quote.

[Rue Nel]

Hello There,

Since you want to apply the css to all of your posts, simply remove the .page-id-{123} selector class and replace it with .single-post. It will then be like this:

.single-post .entry-featured{
    float: left;
    max-width: 300px;
    width: 30%;
    margin-right: 2em;
}

Hope this helps.

[clefler]

That makes sense but still doesn’t work.
Here is what I am using…must be missing something?

.has-post-thumbnail blockquote {
display: grid;
display: -webkit-box;
display: -moz-box;
}
.single-post .entry-featured{
float: left;
max-width: 300px;
width: 30%;
margin-right: 2em;
}

[clefler]

This also does not work….

.has-post-thumbnail .entry-content> blockquote:first-of-type {
display: grid;
display: -webkit-box;
display: -moz-box;
}
.single-post .entry-featured{
float: left;
max-width: 300px;
width: 30%;
margin-right: 2em;
}

[Friech]

Hi There,

Block quotes on your site looks fine on my end.

Please clear your browser’s cache and any caching feature/plugins that your site might have.

Thanks.

[Author]

Posts