[Resolved] Want to add "Medically Reviewed By" near top of article

[Leo]

Don’t use the previous CSS and try this instead:

.page-hero.reviewedby .image {
    display: flex;
    justify-content: center;
    align-items: center;
}

[Rob]

Hey Leo,

Thank you. Here’s what this looks like:

View post on imgur.com

My concerns are:

(1) This side-by-side view holds for mobile as well. I just want this view for desktop-only, and for the images to otherwise be stacked.

(2) There doesn’t seem to be any spacing between the text and image, or the “|” bar present.

Here’s a crude version of what I’m hoping this to look like:

View post on imgur.com

If this isn’t possible, I don’t want to keep leading you in circles. And thanks for all of your help so far.

Best,
Rob

[Leo]

Try adding this as well:

@media (max-width: 768px) {
    .page-hero.reviewedby .image {
        flex-direction: column;
    }
}
@media (min-width: 769px) {
    .page-hero.reviewedby .image img {
        border-left: 1px solid #fff;
        padding-left: 20px;
    }
    .page-hero.reviewedby .image h4 {
        padding-right: 20px;
    }
}

[Rob]

It’s working!!

Thanks for your help and patience Leo. This looks great. Thanks again!!

[Leo]

No problem 🙂

[Sagar]

Hi Rob,

How you did this, can you please guide me step by step?

[Leo]

Hi Sagar,

I’m guessing that there is a better solution now with the help of dynamic content.

Can you open a new topic for your question?

Thanks 🙂

[Author]

Posts