[Resolved] Custom template layout strategy for custom post types question

[Brad]

OK. This is what I’ve got working. It’s not totally code correct I’m sure but it’s working. I tried to go back to flexbox once we hit tablet to center the feature image.

@media(min-width: 769px) {
.single .dynamic-featured-image {
float: left;
margin: 0px 40px 40px 0px;
}
}

@media(max-width: 768px) {
.single .dynamic-featured-image {
display: flex;
flex: 1 1 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}
}

On an iPad mini it works. Obviously I don’t own every device out there so who knows. If you have any other ideas on cleaner media query solutions after the fact moving to tablet much appreciated. Otherwise if you think I’m safe with this than all is good with your confirmation.

Sincere thanks for your assistance.

Section two, the grid, I’ll just delete. Researching flexbox it doesn’t look like it’s designed to wrap accordingly.

[David]

How should it display on tablet devices ? Do you want the image to fill the width of the viewport and be stacked above the text ?

[Brad]

Yeah that works. Some padding of maybe 40px all around the image

padding: 0px 40px 40px 40px;

[David]

I would probably use this CSS:

.single .dynamic-featured-image {
    width: 100%;
    margin-bottom: 40px;
}

@media(min-width: 769px) {
    .single .dynamic-featured-image {
        max-width: 60%;
        float: left;
        margin-right: 40px;
    }
}

The first CSS rule will ensure the image fills the container width on smaller screens. And has the bottom margin to keep it clear of the text below it on all screen sizes.

The second rule, makes the image to 60% ( adjust accordingly ) of the container width on larger screens with the text wrap around. That way the image will resize to give the text more space… and will stop this kinda thing happening:

https://www.screencast.com/t/KV5hH7G4

[Brad]

Almost there… the only problem now is if I put a feature image in a grid or container anywhere in the site, it’ll fill only at 60%. It works in this float situation though.

Going back to flexbox below 768 doesn’t work, width 100% somehow, justify-content: center;
I’ve tried a bunch of variations off this tutorial page.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-tricks

[David]

We can make the CSS more specific.
So in your content template, select the Container Block that the featured image is inside of – and in Advanced > Additional CSS Class(es) add your own custom class eg. cpt-content-template

Then your CSS will become:

.single .cpt-content-template .dynamic-featured-image {
    width: 100%;
    margin-bottom: 40px;
}

@media(min-width: 769px) {
    .single .cpt-content-template .dynamic-featured-image {
        max-width: 60%;
        float: left;
        margin-right: 40px;
    }
}

This will apply only the styles to that container.

[Brad]

Perfect!! Sincere thanks!!

If you don’t mind. I’m going to go back and try to edit out my staging urls.

Sincere thanks once again!

[David]

Awesome – so glad to hear that!
And feel free to Edit away 🙂

[Author]

Posts