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

Html – How to Align Flex Items with Icons Uniformly on Smaller Devices?

I’m working on a responsive web design using flexbox and encountering an issue with the alignment of flex items, especially icons, on smaller devices. The layout includes multiple columns with icons and text, but on smaller screens, the icons are not aligning properly, causing the overall layout to look uneven and, frankly, ugly. I want the columns to be equal in width, and the spacings/margins to be consistent, but the varying icon positions are disrupting this.

My html:

<section class="cta">
    <div class="container mx-auto">
        <div class="cta-container d-flex">
            <div class="cta-item">
                <a href="tel:your-phone-number" class="cta-item-link d-flex jcc aic">
                 
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 
                    <span class="cta-text">Your Phone Number</span>
                </a>
            </div>

            <!-- CTA Item for Address -->
            <div class="cta-item">
                <a href="your-map-link" class="cta-item-link d-flex jcc aic">

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 
                    <span class="cta-text">Your Address</span>
                </a>
            </div>

            <div class="cta-item">
                <a href="mailto:your-email" class="cta-item-link d-flex jcc aic">
                  
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />  
</svg> 
                    <span class="cta-text">Your Email</span>
                </a>
            </div>
            <div class="cta-item">
                <a href="#" class="cta-item-link d-flex jcc aic">

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 
                    <span class="cta-text">Your Working Hours</span>
                </a>
            </div>
        </div>
    </div>
</section>

My css:

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

$cta: ".cta";

#{$cta} {
    background-color: green;
    padding-inline: 24px;
    
    &-container {
        padding-block: 16px;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
        display: flex;
      
        @media (max-width: 480px) {
            padding-block: 32px;
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }
    }

    &-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;

        &-link {
          & > svg {
            transform: scale(0.1);
          }
            gap: 10px;
            color: white; 
            flex-basis: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            // @media (max-width: 768px) {
            //     width: 40%;
            // }
            &>span,
            p {
                font-weight: 400;
                font-size: 14px;
                line-height: 110%;
                text-align: left;
                color: white; 
            }
        }
    }
}

My codepen:

https://codepen.io/korneliuszburian/pen/yLZvwwx

On larger screens, the layout looks fine, but on smaller devices (e.g., mobile phones), the icons do not align uniformly, making the overall appearance unbalanced. The cta__i elements and it’s icons are positioned as centered what’s causing their overlaps.

I’ve tried setting the width on .cta-item and using align-items: baseline, but the items are still off. The icons and text don’t line up as expected, and the misalignment is particularly noticeable on smaller screens.

How can I ensure that the icons align correctly and the flex items maintain a uniform and aesthetic appearance across all device sizes? Any suggestions or CSS fixes would be greatly appreciated!

Tags:

2

Answers


  1. 0

    In your .cta-item class you dont need other styles but width: 100%; and other class .cta-item-link will be something like this:

    .cta-item-link {
    color: white;
    display: flex;
    align-items: center;
    justify-content: unset;
}
    Login or Signup to reply.
  2. 0

    Writing as regular CSS, I hope that is not a problem.

    @media (max-width: 480px) {  * /change the value according to your need /*
  .cta-container {
    flex-direction: column;
    width: fit-content;
    margin: 0 auto;
  }
  .cta-item {
    width: fit-content;
  }
  .cta-item-link{
    width: fit-content;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search