Docs

[be3designs]

I am using shortcode versions of the Cornerstone Cards in Visual Composer and the sizing is acting differently – I *think* based on whether or not the .x-face-text on the front of the card is using one or two lines.

The first four cards are behaving the same and the way I want to, but how best would you recommend I fix the rest?

(will provide a link below)

Also, it degrades terribly as I minimize the screen size or view on mobile, do you have any advice for that as well?

[be3designs]

This reply has been marked as private.

[Paul R]

Hi,

To fix it, you can add this under Custom > CSS in the Customizer.

.x-card-outer.center-vertically .x-face-inner:before {
   height:0;
}

.x-face-outer.front .x-face-content {
    width: 100%;
}

Hope that helps.

[be3designs]

Thanks so much, in full screen it looks much better. Do you have any advice for the mobile/smaller screen? Basically before it finally breaks down to one column, they look like tiny slivers within the 6 columns and there is massive white space between the rows due to the content on the back of the cards.

Any recommendations?

[Paul R]

Hi,

We can reduce the number of columns on smaller screens.

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 979px) {
      .page-id-55 #x-content-band-4 .x-column.x-1-6 {
            width: 30.66666%;
            margin-right: 4%;
     }

     .page-id-55 #x-content-band-4 .x-column.x-1-6:nth-child(3n+3) {  
            margin-right:0 !important;
     }
}

@media (max-width: 767px) {
    .page-id-55 #x-content-band-4 .x-column.x-1-6 {
            width: 48%;
            margin-right: 4%;
     }

     .page-id-55 #x-content-band-4 .x-column.x-1-6:nth-child(2n+2) {  
            margin-right:0 !important;

     }     
}

@media (max-width: 480px) {
     .page-id-55 #x-content-band-4 .x-column.x-1-6 {
            width: 100%;
            margin:0;
     }
}

Hope that helps.

[Author]

Posts