On my website main page, I want to insert the CSS Product Card (current 4×1) into a 4×3 layout (4x horizontal ; 3x vertical). Currently, the section has text stating “CSS Product Card section here”. I’ve given the Section a CSS ID of “home.section.05″.

I’ve tried CodeSnippets but it’s not working as I’d hoped, due to my limited knowledge. I’m not a programmer as you can probably tell

I’ve edited the 4×1 codepen (edit is in this post) and added my own images and text, I’m happy to redo this, so you can use the original codepen if it makes things easier for you.

Thank you for your assistance!

______
______
HTML:
______
______
”

- var cards = [{ title: 'Onsite Support', copy: 'When you need onsite support, we can have the xyz', button: 'Read More' }, { title: 'Procurement', copy: 'The right machine with quality after-sales support', button: 'Read More' }, { title: 'Remote Support', copy: 'Fast support when you need it most', button: 'Read More' }, { title: 'Backups', copy: 'Automated, managed backups', button: 'Read More' }]

mixin card(title, copy, button)
  .card
    .content
      h2.title= title
      p.copy= copy
      button.btn= button

main.page-content
  each card in cards
    +card(card.title, card.copy, card.button)

______
______
CSS:
______
______
”

@import url('https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap');

$imageIds: '1578357078586-491adf1aa5ba', '1525547719571-a2d4ac8945e2', '1525182008055-f88b95ff7980', '1517819655378-25fe37197692';

$bp-md: 600px;
$bp-lg: 800px;

:root {
  --d: 1000ms;
  --e: cubic-bezier(0.19, 1, 0.22, 1);
  --font-sans: 'Rubik', sans-serif;
  --font-serif: 'Cardo', serif;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
}

.page-content {
  display: grid;
  grid-gap: 1rem;
  padding: 1rem;
  max-width: 1024px;
  margin: 0 auto;
  font-family: var(--font-sans);
  
  @media (min-width: $bp-md) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  @media (min-width: $bp-lg) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {  
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 1rem;
  width: 100%;
  text-align: center;
  color: whitesmoke;
  background-color: whitesmoke;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1), 
    0 2px 2px rgba(0,0,0,0.1), 
    0 4px 4px rgba(0,0,0,0.1), 
    0 8px 8px rgba(0,0,0,0.1),
    0 16px 16px rgba(0,0,0,0.1);
  
  @media (min-width: $bp-md) {
    height: 350px;
  }
  
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    background-size: cover;
    background-position: 0 0;
    transition: transform calc(var(--d) * 1.5) var(--e);
    pointer-events: none;
  }
  
  &:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    pointer-events: none;
    background-image: linear-gradient(
      to bottom,
      hsla(0, 0%, 0%, 0) 0%,
      hsla(0, 0%, 0%, 0.009) 11.7%,
      hsla(0, 0%, 0%, 0.034) 22.1%,
      hsla(0, 0%, 0%, 0.072) 31.2%,
      hsla(0, 0%, 0%, 0.123) 39.4%,
      hsla(0, 0%, 0%, 0.182) 46.6%,
      hsla(0, 0%, 0%, 0.249) 53.1%,
      hsla(0, 0%, 0%, 0.320) 58.9%,
      hsla(0, 0%, 0%, 0.394) 64.3%,
      hsla(0, 0%, 0%, 0.468) 69.3%,
      hsla(0, 0%, 0%, 0.540) 74.1%,
      hsla(0, 0%, 0%, 0.607) 78.8%,
      hsla(0, 0%, 0%, 0.668) 83.6%,
      hsla(0, 0%, 0%, 0.721) 88.7%,
      hsla(0, 0%, 0%, 0.762) 94.1%,
      hsla(0, 0%, 0%, 0.790) 100%
    );
    transform: translateY(-50%);
    transition: transform calc(var(--d) * 2) var(--e);
  }
  
  @each $id in $imageIds {
    $i: index($imageIds, $id);
    
    &:nth-child(#{$i}):before {
      background-image: url(https://images.unsplash.com/photo-#{$id}?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
    }
  }
}

.content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 1rem;
  transition: transform var(--d) var(--e);
  z-index: 1;
  
  > * + * {
    margin-top: 1rem;
  }
}

.title {
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.2;
}

.copy {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.35;
}

.btn {
  cursor: pointer;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 0.025rem;
  text-transform: uppercase;
  color: white;
  background-color: black;
  border: none;
  
  &:hover {
    background-color: lighten(black, 50%);
  }
  
  &:focus {
    outline: 1px dashed yellow;
    outline-offset: 3px;
  }
}

@media (hover: hover) and (min-width: $bp-md) {
  .card:after {
    transform: translateY(0);
  }
  
  .content {
    transform: translateY(calc(100% - 4.5rem));
    
    > *:not(.title) {
      opacity: 0;
      transform: translateY(1rem);
      transition:
        transform var(--d) var(--e),
        opacity var(--d) var(--e);
    }
  }
  
  .card:hover,
  .card:focus-within {
    align-items: center;

    &:before { transform: translateY(-4%); }
    &:after { transform: translateY(-50%); }

    .content {
      transform: translateY(0);

      > *:not(.title) {
        opacity: 1;
        transform: translateY(0);
        transition-delay: calc(var(--d) / 8);
      }
    }
  }
  
  .card:focus-within {
    &:before,
    &:after,
    .content,
    .content > *:not(.title) {
      transition-duration: 0s;
    }
  }
}

Thank you again!

Regards

Nerd22

View post on imgur.com

What can I do?
Is possible to show the product card on the mobile in 2 columns?

The “Item number” field is inactive and cannot be changed.
am I missing a plugin?

I’m having some problems with mobile page as it shows only one product in one row. You can notice that this does not look good (product cards and the content inside are way too narrow)

As a result it creates a long column of products (it’s perfect on the desktop and tablet tho)

I tried to add specific CSS but anything that I have tried did not work.

How to show two (or more) products per column on mobile site or widen the product cart to the whole width of the page?

Thank you in advance.

Now about of my problem.
I would like to change an appearance of variations on a product card. It is made like a table. But I cant understand why 2 cells of the same line appeare one above other. How could I change it? I need a label and a value appeare in the same line (the same level).

Thank you!

<table class=”variations” cellspacing=”0″>
<tbody>
<tr>
<td class=”label”><label for=”pa_formato-mm”>Formato (mm)</label></td>
<td class=”value”><select id=”pa_formato-mm” class=”” name=”attribute_pa_formato-mm” data-attribute_name=”attribute_pa_formato-mm”><option value=””>Escolha uma op??o</option><option value=”150×100″>150×100</option><option value=”150×160″>150×160</option><option value=”200×150″>200×150</option><option value=”300×100″>300×100</option><option value=”85×55″>85×55</option></select></td>
</tr>
…
</table>

Having trouble getting the product cards to validate.The data is showing up on the page but not being picked up by the validator…there is a slight difference in the code out on the twitter card, I wonder if this is an issue?

For instance the tool displays:
<meta name=”twitter:data:1″ content=”$70″>

and twitter prefers: <meta name=”twitter:data1″ content=””>

Is this the problem?

My product card data I am testing here is located here:
whospromotingyou.com/shop/custom-actor-postcard/

and twitter is claiming not see any data for these fields:

<meta name=”twitter:data1″ content=””>
<meta name=”twitter:data2″ content=””>
<meta name=”twitter:label1″ content=””>
<meta name=”twitter:label2″ content=””>

https://www.ads-software.com/extend/plugins/jm-twitter-cards/

https://www.ads-software.com/extend/plugins/twitter-cards/