search

marinafink / noshcuisine

Nosh Cuisine is a semester project by Marina Fink which includes an interactive website where users can create a profile, search for recipes and upload their own recipes.
1 stars 0 forks source link

Orange labels of the recipe cards are not in a line #11

Open marinafink opened 1 year ago

marinafink commented 1 year ago

Description: On the SERP, all recipes are displayed on "cards". On the orange labels of the cards you can see the difficulty level of the recipe, how long it takes to cook the recipe and how many star ratings it has. If you compare the cards to each other, you can see that the orange labels are not at the same height for each card. Depending on how long the title and description of the recipe are, the labels are further down or further up.

Steps to reproduce:

  1. Visit https://mars.iuk.hdm-stuttgart.de/~mf177/index.php (username: mf177, password: M5fFm67#ar)
  2. Scroll through the page and look at the recipe cards

Expected Result: The orange labels of the recipe cards all appear at the same height, no matter how long the title and description of the recipes are.

Actual Result: The orange labels of the recipe cards are not displayed constantly in one line. When recipes have a longer title or description, the labels shift down and thus there is an inconsistency.

Image

Configuration:

marinafink commented 1 year ago

In the classes .pill_container and .favorite adjustments were made to the CSS. The orange labels were aligned equally using position absolute