Docs

[wochurch]

The cards are working well for most screen sizes, but as you reduce the size of the screen they format incorrectly, pushing the content of the cards down below the card itself. I’d love a fix, but if that’s more involved, I would be totally fine if all we did was change the width at which they switch over to full width blocks. I appreciate your help.

http://www.thebiblereadingplan.com/
WP: 4.7
X: 4.6.4
Cornerstone: 1.3.3

[wochurch]

This reply has been marked as private.

[wochurch]

Here are a couple of screenshots.

[Jade]

Hi there,

Please try to add this code in the customizer:

@media (max-width: 767px) {
    .x-card-outer .x-face-title {
        font-size: 1em;
        clear: both;
    }
}

Hope this helps.

[wochurch]

Thanks for the quick response. It’s giving me the same behavior though. I added it in the global CSS section, saved the edit page again and refreshed the page.

[Rupok]

Hi there,

Thanks for writing back. Let’s try this :

.x-card-outer .x-face-outer {
  height: auto;
}

Hope this will do the job.

Cheers!

[wochurch]

Excellent! That one got it. Thank you.

Just in case I’d like to change it going forward, can you send me the CSS that controls when the cards switch over to full width blocks?

[Rupok]

Hi there,

Thanks for writing back. It will switch to fullwidth under 768px. So you can use media query to write CSS for the fullwidth version :

@media only screen and (max-width: 767px) {
.x-card-outer .x-face-outer {
  height: 100%;
}
}

Cheers!

[Author]

Posts