menu

Questions & Answers

How can I customize code in angular for alignment

I am facing some issues in my (home.component.css ) about alignment .

  • Instead of origins I but descriptions of food .

  • And I want the title of food take specific spaces .

  • And stars and clock be in the same line .

  • And price be in the same position(line) for all products , to be nice for users .

Screenshoot for the output result

ul{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
}

ul li a{
  height: 26.5rem;
  width: 20rem;
  border: 1px solid whitesmoke;
  border-radius: 1rem;
  margin: 0.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #e72929;
}
li a:hover{
  opacity: 0.9;
  cursor: pointer;
}

.content{
  padding: .5rem 1rem;
  position: relative;
}

.favorite{
  position: absolute;
  top: .5rem;
  right: .7rem;
  font-size: 1.2rem;
}

.favorite.not{
  color: grey;
}

.stars{
  margin-bottom: .5rem;
}

.product-item-footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.origins{
  flex: 9;
}

.origins span{
  border-radius: none;
  background-color: none;
  display: inline-block;
  font-size: .9rem;
  color: grey;
  margin-right: .7rem;
  margin-top: .2rem;
}

.cook-time{
  font-size: .8rem;
  flex: 3;
  text-align: right;
}

.price{
  color:#414141;
  margin-top: .7rem;
}
Comments:
2023-01-21 20:42:02
Welcome to SO! Please read How to Ask, present a minimal reproducible example, in your case some HTML using the CSS would help. Currently I do not see any involvement of Angular. Please edit and also ask a specific question stating what you want and what is the current issue. Examples of actual outcome compared to desired/expected may help.
Answers(0) :