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

  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;

  padding: .5rem 1rem;
  position: relative;

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

  color: grey;

  margin-bottom: .5rem;

  display: flex;
  justify-content: space-between;
  align-items: center;

  flex: 9;

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

  font-size: .8rem;
  flex: 3;
  text-align: right;

  margin-top: .7rem;
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) :