Center cards when columns break and stack

Hello,

I’m trying to figure out how I can center my cornerstone cards when breakpoints are hit and my column items stack vertically and not horizontally.

I’m developing locally currently so I cant give access to the site, but I can attach a picture.

As I reduce the size it does center more, but at certain sizes you can the that the card is sort of left justified against some sort of container I can’t exactly find.

Hi There,

Thanks for writing in in!

Its too difficult to suggest you the solution without checking the site.
Can you please confirm which cornerstone element you are using for the image ?
If you can make the column text align center it may fix the issue.

Hope this helps!

Thanks

I understand and may have to leave it like that until it goes live.

It’s a section with three rows, the first row is just a headline and the next two are split into 3 columns and each column contains a classic card element (that I’ve customized through CSS)…

Hey There,

How did you customize it? Could you please add your custom css in the your next reply? I am guessing that it is not centered in smaller screens because of your custom css.

Please let us know how it goes.

Very likely. I had to mess around with that a lot to get it even close to working.
Everything else about it works the exact way I want it to.

/* Custom weekly event card controls */

/* Turn Table Tuesday */
#card-ttt .x-card-inner .front {
    background-image: url(http://localhost/wordpressamh/wp-content/uploads/2018/02/TurnTableTuesday.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Funk Jam */
#card-fj .x-card-inner .front {
background-image: url(http://localhost/wordpressamh/wp-content/uploads/2018/02/FunkJam.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}

/* Evil Note Lab */
#card-enl .x-card-inner .front {
background-image: url(http://localhost/wordpressamh/wp-content/uploads/2018/02/EvilNote.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}

/* Totally Rad Trivia */
#card-trt .x-card-inner .front {
background-image: url(http://localhost/wordpressamh/wp-content/uploads/2018/02/TotallyRadTrivia.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}

/* Free Dead Friday */
#card-fdf .x-card-inner .front {
background-image: url(http://localhost/wordpressamh/wp-content/uploads/2018/02/FreeDeadFriday.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}

/* Bluegrass Brunch */
#card-bgb .x-card-inner .front {
background-image: url(http://localhost/wordpressamh/wp-content/uploads/2018/02/Bluegrass-Brunch_11.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}



@media (max-width: 480px) {
 .el12.x-section {
 padding: 9% 15% 9% 15% !important;
}

}
@media (max-width: 767px) {
 .el12.x-section {
 padding: 9% 15% 9% 15% !important;
 }

}
@media (max-width: 979px) {

}
@media (max-width: 1199px) {
.x-card-outer.flip-3d .x-card-inner {
min-height: 175px;
max-height: 175px;
max-width: 350px;
}
}

@media (min-width: 1200px) {

.x-card-outer.flip-3d .x-card-inner {
min-height: 175px;
/* max-height: 175px; */
max-width: 350px;
 }
}


.x-face-graphic {
display: none;
}
.x-face-outer.front .x-face-title,
.x-face-outer.front .x-face-text {
display: none;
}

.x-face-title {
font-size: 20px !important;
 }

/* end of custom card stuff */

Glad to hear you got it sorted.

Cheers!

Sorry, miscommunication there.

I did not fix anything, I was just responding to @RueNel by adding in my custom CSS.

Hi there,

Unfortunately, I could not guess a correct solution from the CSS that you provided. We indeed need to have the website live to be able to check the code using our browser developer toolbar to be able to suggest you a proper CSS code.

Please move your website to a live server and get back to us to follow up.

Thank you for your understanding.

Totally get it, I’ll get back to you guys when I have it going live.

Thanks!

Thank you, we will follow up the case then.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.