sarck1020 sarck1020 - 1 month ago 11
CSS Question

HTML and CSS Alignment

So..this is my first time using stackoverflow so pardon if I made a mistake.

I am trying to replicate the css code snippet here: https://codepen.io/virgilpana/pen/RNYQwB.

It works fine and all but I can't figure out how to add more product cards on the same page. I've tried duplicating the #product-card div but doing so stops the code from working. Here is an example:

<div id="make-3D-space">
<div id="product-card">
<div id="product-front">
<div class="shadow"></div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt.png" alt="" />
<div class="image_overlay"></div>
<div id="view_details">View details</div>
<div class="stats">
<div class="stats-container">
<span class="product_price">$39</span>
<span class="product_name">Adidas Originals</span>
<p>Men's running shirt</p>

<div class="product-options">
<strong>SIZES</strong>
<span>XS, S, M, L, XL, XXL</span>
<strong>COLORS</strong>
<div class="colors">
<div class="c-blue"><span></span></div>
<div class="c-red"><span></span></div>
<div class="c-white"><span></span></div>
<div class="c-green"><span></span></div>
</div>
</div>
</div>
</div>
</div>
<div id="product-back">
<div class="shadow"></div>
<div id="carousel">
<ul>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large.png" alt="" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large2.png" alt="" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large3.png" alt="" /></li>
</ul>
<div class="arrows-perspective">
<div class="carouselPrev">
<div class="y"></div>
<div class="x"></div>
</div>
<div class="carouselNext">
<div class="y"></div>
<div class="x"></div>
</div>
</div>
</div>
<div id="flip-back">
<div id="cy"></div>
<div id="cx"></div>
</div>
</div>
</div>
<div id="product-card">
<div id="product-front">
<div class="shadow"></div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt.png" alt="" />
<div class="image_overlay"></div>
<div id="view_details">View details</div>
<div class="stats">
<div class="stats-container">
<span class="product_price">$39</span>
<span class="product_name">Adidas Originals</span>
<p>Men's running shirt</p>

<div class="product-options">
<strong>SIZES</strong>
<span>XS, S, M, L, XL, XXL</span>
<strong>COLORS</strong>
<div class="colors">
<div class="c-blue"><span></span></div>
<div class="c-red"><span></span></div>
<div class="c-white"><span></span></div>
<div class="c-green"><span></span></div>
</div>
</div>
</div>
</div>
</div>
<div id="product-back">
<div class="shadow"></div>
<div id="carousel">
<ul>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large.png" alt="" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large2.png" alt="" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large3.png" alt="" /></li>
</ul>
<div class="arrows-perspective">
<div class="carouselPrev">
<div class="y"></div>
<div class="x"></div>
</div>
<div class="carouselNext">
<div class="y"></div>
<div class="x"></div>
</div>
</div>
</div>
<div id="flip-back">
<div id="cy"></div>
<div id="cx"></div>
</div>
</div>
</div>
</div>


The css and js are in the pen above.

I'm wondering, why can't I just copy and paste the div to make more grids so that I can replace the images with different ones?

Thank you.

Answer

Welcome to SO! This was a great first question.

As @Tyr and @vysnc suggest in the comments, the biggest issue with simply copy/pasting the product-card code block is that the demo utilizes IDs, not classes. The W3C states:

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character.

So, duplicating all those IDs in that code block goes against best practices. It's also confusing your jQuery, much of which is scoped to individual IDs like #product-card and #view-details. It's assuming there's only one of those elements on each page, and when it finds more, its unsure how to handle it.

The Codepen code isn't the most efficiently written, but I would take the following steps to debug this:

  1. Make sure you only have one instance running of that #product-card code block. Within that code block, change all IDs to classes. This means that <div id="product-card"> becomes <div class="product-card">, and so on. Note that, obviously, this will break your demo temporarily.

  2. Within your jQuery, you'll need to similarly change all IDs to classes. In order to keep interactions limited to that specific card (and not every card on the page), you will need to refactor slightly. Using the closest(), find(), and next() jQuery methods will help you scope the code to an individual card.

  3. Adjust your CSS. The demo has everything absolutely positioned and centered, so if you just copy/paste the card markup, the cards will stack underneath one another, giving the appearance that the additional cards simply haven't appeared. In the parent <div class="make-3D-space">, remove position: absolute and position: relative (this is a typo in the demo code), and then add whatever CSS you need to create your columns.

I made a quick and dirty demo to illustrate: https://codepen.io/cameronscott137/pen/edwExe

Comments