[Vuejs]-Fixing three aesthetic issues regarding an html input, select, and button

by

1👍

there is several mistakes in your codes:

  1. you set padding on .division and there is no space for your content in input element and select element
  2. align-items(not -content) center elements vertically if you want to center any element horizontally you should do this:
.parent-elmnt {
    display: flex;
    justify-content: center;
}
  1. you should use transform not transition
.add-entry:hover {
    transform: scale(1.1);
}

check this :

      /* add this codes to variables.css */

      :root {
        --primary-color: #4caf50;
        --text-color: #fff;
      }

      /* add this code to your reset.css */

      :root {
        font-size: 16px;
      }

      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        font: inherit;
      }

      h1 {
        font-weight: bold;
        font-size: 1.25rem
      }

      button {
        outline: none;
      }

      /* add this code to utilities.css */

      .p-2 {
        padding: 0.5rem;
      }

      .p-4 {
        padding: 1rem;
      }

      .mb-4 {
        margin-bottom: 1rem;
      }

      .flex {
        display: flex;
      }

      .column {
        flex-direction: column;
      }

      .justify-center {
        justify-content: center;
      }

      .justify-space-between {
        justify-content: space-between;
      }

      .w-full {
        width: 100%;
      }

      .rounded-pill {
        border-radius: 500rem;
      }

      /* add this codes to your components.css */
      .btn {
        background-color: var(--primary-color);
        color: var(--text-color);
        border: none;
        padding: 0.5rem;
        transition: all 0.5s;
      }

      .btn:hover {
        transform: scale(1.02);
      }
      
      /* then import all of these file in your main css */
      
    <div class="p-4 mb-4 flex column justify-center">
      <h1 class="mb-4">Banana</h1>

      <div class="flex justify-space-between">
        <h2>Serving size</h2>
        <div>
          <input class="p-2" />
          <select class="p-2">
            <option>100g</option>

            <option>large</option>
          </select>
        </div>
      </div>
    </div>
    <div class="p-4">
      <button class="btn w-full rounded-pill">Add to Diary</button>
    </div>
👤sadeq shahmoradi

Leave a comment