CODEWITHSUNDEEP
javascripthtmljquerycss
user18694296
user18694296

Reputation:

display stacked cards in a row

I'm trying to set up a row of cards for my home page by duplicating another card that I already have set up properly. When I tried to recreate it, I messed up my styling. The gray overlay isn't appearing and the card is zoomed in without me hovering over it. Would someone be able to explain what I did wrong, please?

(Code Snippet) https://replit.com/@diknight55/snippet#index.html

Upvotes: 2

Views: 484

Answers (1)

VOL
VOL

Reputation: 309

I'm not sure I completely understand what you are looking for, but one thing I noticed from the example is that the card2-img-overlay class doesn't have the following styles (like the card-img-overlay class does):

.card2-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--bs-card-img-overlay-padding);
    border-radius: var(--bs-card-inner-border-radius);
}

Edit

A better way to achieve what you want is to do the following change to your styles:

.row>* {
  flex: 1;
  ...
}

Also, for your 2nd card's li elements, change the "card2" class they have to "card1". Now that you are using the flex properly, you don't need the separate classes anymore. Then, change the "card2-img-overlay" classes of all the overlay divs to "card-img-overlay". Same as before, you don't need the separate class anymore.

After this the arrows should show up in the right place as well.

Then the only problem that remains is the button functionality. Now if you click any of the buttons, it transports the cards from stack2 to stack1.

To fix this, you should probably have separate classes "next1" and "next2" (as well as "prev1" and "prev2") for the buttons in the first and second stack respectively. Otherwise you are just overwriting the onclick function for the "next" and "prev" buttons. Also, don't reuse the lastCard variable, but rather use lastCard1 and lastCard2 for example. What's happening now is that when your site loads, it runs the javascript files and the last value you set to lastCard will stick. So then when any of the onclicks fires, it thinks that a card from stack2 is the lastCard regardless of which stack's buttons you click.

Upvotes: 1

Related Questions