Product card with "Learn More" - Breaking

Asked

Viewed 95 times

-1

I’m making these cards with flexbox to open more information on the right side, but when it arrives in the last column, the content is broken. I have tried to remove the break info and of card, but you end up with a blank space or open the information on another line.

The intention is to maintain 3 cards on the line (with info open to the side) and 4 cards without info open. Are in a flex container of 1140px.

So far I’ve found no way to make it work.

const card = document.querySelectorAll('.card');
const hiddenCard = document.querySelectorAll('.hidden-card');

const btn = document.querySelectorAll('.btn');

btn.forEach((item, index) => {
  item.addEventListener('click', () => {
    showCard(item, index);
  })
});

const showCard = (item, index) => {
  card.forEach((item) => {
    item.classList.remove('ativo');
  });

  hiddenCard.forEach((item) => {
    item.classList.remove('ativo');
  });

  card[index].classList.add('ativo');
  hiddenCard[index].classList.add('ativo');
}
h1,
h2,
h3,
p,
a,
li,
body {
  margin: 0px;
  padding: 0px;
}

* {
  box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.btn {
  display: block;
  bottom: 20px;
  position: absolute;
  margin-left: 40px;
  width: 180px;
  background: #fff;
  text-align: center;
  padding: 15px 0;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
}

.btn:hover {
  background: #000;
  color: #fff;
}

.container {
  max-width: 1140px;
  margin: 50px auto;
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: 260px;
  height: 300px;
  background: teal;
  margin: 10px;
  position: relative;
}

.content {
  margin: 20px auto 0 auto;
  text-align: center;
  background: tomato;
  height: 200px;
  width: 260px;
}

.hidden-card {
  height: 280px;
  background: rgba(255, 100, 100, .7);
  margin-top: 10px;
  visibility: hidden;
  opacity: 0;
  animation: fade;
  width: 0px;
  position: relative;
  transition: .5s all;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translate3d(-50px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.hidden-card.ativo {
  transform: none;
  visibility: visible;
  opacity: 1;
  width: 280px;
  height: 300px;
  margin-right: 10px;
}

.card.ativo {
  margin-right: 0px;
}
<section class="container">
  <div class="card">
    <div class="content">
      <h2>Content</h2>
    </div>
    <a class="btn">Click</a>
  </div>
  <div class="hidden-card" id="hidden-card">

  </div>

  <div class="card">
    <div class="content">
      <h2>Content</h2>
    </div>
    <a class="btn">Click</a>
  </div>
  <div class="hidden-card" id="hidden-card">

  </div>

  <div class="card">
    <div class="content">
      <h2>Content</h2>
    </div>
    <a class="btn">Click</a>
  </div>
  <div class="hidden-card" id="hidden-card">

  </div>

  <div class="card">
    <div class="content">
      <h2>Content</h2>
    </div>
    <a class="btn">Click</a>
  </div>
  <div class="hidden-card" id="hidden-card">

  </div>

  <div class="card">
    <div class="content">
      <h2>Content</h2>
    </div>
    <a class="btn">Click</a>
  </div>
  <div class="hidden-card" id="hidden-card">

  </div>

  <div class="card">
    <div class="content">
      <h2>Content</h2>
    </div>
    <a class="btn">Click</a>
  </div>
  <div class="hidden-card" id="hidden-card">

  </div>
</section>

javascript html css

1 answer

-2

I don’t know if you’re using Bootstrap, if you are, ultilize the grids to split your layout, e.g.: NOTE: Expand the screen to see the divisions correctly.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<div class="row">
				<div class="col-md-4">
					<div class="card">
						<h5 class="card-header">
							Card title
						</h5>
						<div class="card-body">
							<p class="card-text">
								Card content
							</p>
						</div>
						<div class="card-footer">
							Card footer
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="card">
						<h5 class="card-header">
							Card title
						</h5>
						<div class="card-body">
							<p class="card-text">
								Card content
							</p>
						</div>
						<div class="card-footer">
							Card footer
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="card">
						<h5 class="card-header">
							Card title
						</h5>
						<div class="card-body">
							<p class="card-text">
								Card content
							</p>
						</div>
						<div class="card-footer">
							Card footer
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-3">
					<div class="card">
						<h5 class="card-header">
							Card title
						</h5>
						<div class="card-body">
							<p class="card-text">
								Card content
							</p>
						</div>
						<div class="card-footer">
							Card footer
						</div>
					</div>
				</div>
				<div class="col-md-3">
					<div class="card">
						<h5 class="card-header">
							Card title
						</h5>
						<div class="card-body">
							<p class="card-text">
								Card content
							</p>
						</div>
						<div class="card-footer">
							Card footer
						</div>
					</div>
				</div>
				<div class="col-md-3">
					<div class="card">
						<h5 class="card-header">
							Card title
						</h5>
						<div class="card-body">
							<p class="card-text">
								Card content
							</p>
						</div>
						<div class="card-footer">
							Card footer
						</div>
					</div>
				</div>
				<div class="col-md-3">
					<div class="card">
						<h5 class="card-header">
							Card title
						</h5>
						<div class="card-body">
							<p class="card-text">
								Card content
							</p>
						</div>
						<div class="card-footer">
							Card footer
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.