Docs

[peder766]

I am having troubles with the formatting the “card” element when I view my website on Firefox. The text and image on the front of the card is getting pushed below the card itself. See image: There are cards on multiple pages of the website. Here are the URLS.

Theme X, Cornerstone, and WordPress are all up-to-date

URLS:
http://marmac.cloudaccess.host/premium-products/
http://marmac.cloudaccess.host/contractor-products/

Thanks for the help!

[Paul R]

Hi,

Thanks for writing in!

We can reduce the number of columns in smaller screens.

To achieve that, please add cards-row in the class field of all the rows where you cards resides.

Then add this in Appearance > Customize > Custom > Edit Global CSS

.cards-row {
    text-align:center;
}

@media (max-width: 979px) {
   .cards-row .x-column {
          float: none;
          margin-right:0;
          display: inline-block;
          width: 30.66666%;
   }

}

@media (max-width: 767px) {
   .cards-row .x-column {
          float: none;
          margin-right:0;
          display: inline-block;
          width: 48%;
   }
}

@media (max-width: 480px) {
  .cards-row .x-column {
          float: none;
          margin-right:0;
          display: inline-block;
          width: 100%;
   }
}

Hope that helps.

[Author]

Posts