Html Question posted in
Some basic documentation can be found here.

Html – Aligning the items in a collection

We want to align items within a <div> so that it will look more appealing in our website. Currently, the items are not centered within a one row when we switch to mobile device and go to Menu->Services.

Here is the link – https://jk-part.kz/en

How can we achieve it?

We want it to look like a table, but not exactly without breaking the core code.

Here is the markup:

<div class="menu__hover hover-menu">
  <div class="hover-menu__title">
    <span>services</span>
    <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0.92894 1.63123L5.03008 5.73242L9.13127 1.63123" stroke="#B5B5B5" stroke-width="2"></path>
    </svg>
  </div>
  <div class="hover-menu__hidden" style="display: block;">
    <div class="hover-menu__items">
      <a href="https://jk-part.kz/en/nedropolzovanie" class="hover-menu__item">
        <img src="/storage/app/media/services/icons/1.svg" alt="Icon">
        <span>Subsoil use</span>
      </a>
      <a href="https://jk-part.kz/en/neftegazovyj-sektor" class="hover-menu__item">
        <img src="/storage/app/media/services/icons/2.svg" alt="Icon">
        <span>Oil and gas sector</span>
      </a>
      <a href="https://jk-part.kz/en/zakup-tru-pravovoe-soprovozhdenie" class="hover-menu__item">
        <img src="/storage/app/media/services/icons/3.svg" alt="Icon">
        <span>Procurement of TRU. Legal support.</span>
      </a>
      <a href="https://jk-part.kz/en/yuridicheskie-uslugi" class="hover-menu__item">
        <img src="/storage/app/media/services/icons/4.svg" alt="Icon">
        <span>Contract law</span>
      </a>
      <a href="https://jk-part.kz/en/yuridicheskij-autsorsing" class="hover-menu__item">
        <img src="/storage/app/media/services/icons/5.svg" alt="Icon">
        <span>Legal outsourcing</span>
      </a>
      <a href="https://jk-part.kz/en/zakonotvorcheskaya-deyatelnost" class="hover-menu__item">
        <img src="/storage/app/media/services/icons/6.svg" alt="Icon">
        <span>Law-making activity</span>
      </a>
      <a href="https://jk-part.kz/en/predstavitelstvo-v-sude" class="hover-menu__item">
        <img src="/storage/app/media/services/icons/7.svg" alt="Icon">
        <span>Representing in court</span>
      </a>
      <a href="https://jk-part.kz/en/razresheniya-i-uvedomleniya" class="hover-menu__item">
        <img src="/storage/app/media/services/icons/8.svg" alt="Icon">
        <span>Permits and notifications</span>
      </a>
    </div>
  </div>
</div>

So, the outermost div with the class ‘hover’ is a flexbox with a column flex direction. We believe this is appropriate for this situation. We tried using a grid layout, but it didn’t yield the desired results.

How can we arrange the form so that the icons are on one cross-axis line and the descriptions are on a parallel line?

Tags:

2

Answers


  1. 0

    In your case:

    @media (max-width: 1200px) {
  .hover-menu__items {
    align-items: unset;
  }
}
    Login or Signup to reply.
  2. 0

    Consider flexbox alignment:

        /* General styles for .hover-menu__items */
.hover-menu__items {
  display: flex;
  flex-direction: column; /* Arrange items vertically */
}

.hover-menu__item {
  display: flex;
  align-items: center; /* Center items vertically */
  margin-bottom: 10px; /* Add space between items */
}

.hover-menu__item img {
  margin-right: 10px; /* Space between icon and text */
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
  .hover-menu__item {
    justify-content: flex-start; /* Align items to the start */
  }

  .hover-menu__title {
    text-align: center; /* Center the title */
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search