Display three icons on the screen with their corresponding titles and subtitles, arranged in alignment with each title

I am struggling to align the titles of three icons in a row with varying subtitle lengths. I need this alignment to work seamlessly on both mobile and desktop devices. https://i.sstatic.net/fBZRB.png

Below is the code I have so far, but I have not been able to successfully align them. Any help using flexbox would be greatly appreciated:

#join3icons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--size-125);
  padding: 0 var(--size-125);
}

.icon-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
<div id="join3icons">
  <div class="icon-box">
    <a href="."><img src="Easier.svg"></a>
    <span class="headline3">Einfacher</span>
    <span class="sub3iconsText">Auftragsverfolgung</span>
  </div>
  <div class="icon-box">
    <a href="."><img src="Faster.svg"></a>
    <span class="headline3">Schneller</span>
    <span class="sub3iconsText ">Checkout-Vorgang</span>
  </div>
  <div class="icon-box">
    <a href="."><img src="Earn.svg"></a>
    <span class="headline3">Besser</span>
    <span class="sub3iconsText ">Lorem Ipsum is simply dummy text</span>
  </div>
</div>

htmlcssflexboxalignment

Answer №1

To achieve the desired layout, consider switching from using flexbox to grid

#iconContainer {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
}

Remove the icon box CSS class and its corresponding divs to organize elements based on your grid structure

If needed, adjust the grid-template-rows line by replacing each instance of '1fr' with 'auto' for individual row heights. Additionally, you can include a gap between items.

Answer №2

To address the issue of varying photo sizes, it is crucial to specify the exact dimensions for all images. By setting a fixed height value in the CSS code snippet provided below, you can ensure consistency across your photo display.

CSS:

img{
    height: 100px;
}

Answer №3

The reason the title is not fitting in one line is because the text at the bottom is a single-line while the rest of it is two lines. This causes flex to adjust the title on the left side, resulting in it being unable to fit in one line. To solve this issue, you can utilize grid which provides an easier solution or specify a certain size for the bottom text such as:

.subHeadingText {
    height: 40px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying three lists side by side in a web application can be achieved using a combination of jQuery Mobile and the Model-View

Having trouble setting up three lists to display side by side in jQuery Mobile? Unfortunately, the ui-grid won't work for me because of a script that hides them and reveals them based on a number from 0-3. Each list should be dynamically centered and ...

cssasp.net-mvcmodel-view-controllerjquery-mobile

Ways to ensure that floating blocks remain in the same row using CSS

Check out my demo here: http://jsfiddle.net/3c40tafe/1/ Is there a way to align the icon, file name, and description in a single row? The icon and title should have fixed widths, while the description paragraph should take up the remaining width. Here&ap ...

htmlcss

Bootstrap CSS allows for easy closing of modals

Having trouble with the Twitter Bootstrap CSS causing my animation to open with a fade and immediately close. Not sure why this is happening, can anyone provide assistance? Update: Turns out, the bootstrap.css file already has Modals implemented. Using bo ...

cssmodal-dialogtwitter-bootstrap

Explore the data within a directory containing files and subfolders using javascript, HTML5, AngularJS, or jQuery

I'm looking to access and read files as well as subfolders within a folder that is selected using <input type="file"> I understand that I could potentially use <input type="file" multiple webkitdirectory />, but this solution is specific ...

javascriptjqueryangularjshtml

Enhancing Your Website - Customizing Image Sizes for Optimal Display

I have put in a fair amount of effort searching through Google and attempting to troubleshoot the issue on my own, but despite my limited knowledge, I am unable to determine how to properly scale my image using bootstrap. Essentially, I have two flex boxe ...

javascriptcss

Python 3 Encounter: Issue Uncovered in Link Extraction Process from Webpage

Consider the following scenario: <div class="more reviewdata"> <a onclick="bindreviewcontent('1660651',this,false,'I found this review of Star Health Insurance pretty useful',925075287,'.jpg','I found this revi ...

htmlregexpython-3.xbeautifulsoup

Integrate Tailwind CSS into the bundled JavaScript file

Is there a way to integrate tailwind css into bundle js effectively? Take a look at this example involving vue 3 and tailwind 3 https://github.com/musashiM82/vue-webpack. Upon executing npm run build , it generates 3 files: app.js ABOUTPAGE.js app.6cba1 ...

javascriptcssvue.jstailwind-css

Any recommendations besides suggesting "g"? Let's brainstorm some other ideas for g!

Looking for some assistance with a mixin I wrote that seems to be causing a loop. Any suggestions on how to optimize the code or alternative methods to achieve the desired outcome? <div class='mh-60 pt-10'>dfgdfgsdfgsdf</div> ...

cssloopssass

Assign a value of 0 to the ngModel if it is empty

I am trying to ensure that when the value is null, it defaults to 0. At the moment, I am utilizing Angular PrimeNG components. <p-calendar [(ngModel)]="model.start_time" [timeOnly]="true" placeholder="00:00"></p-calen ...

htmlangularprimeng

Is there a way to lock an element's position on a webpage once it reaches a specific point?

Excuse me if this query seems trivial. I am currently in the process of designing a webpage with a header that has two distinct sections (upper and lower). My aim is for the lower portion of the header to remain fixed on the page as I scroll down. Is the ...

javascripthtml

Navigating the Drift

I am a beginner in HTML/CSS and need some assistance. Here is the layout I am working with: <style> #main {background-color: red; width: 30%;} #right_al{float: right;} #to_scroll{overflow: scroll;} </style> <div id='main'> ...

htmlcss

List within a list that is only displayed if a specific condition is

Looking for help with CSS styling to make an embedded list display as a contiguous list in the final output. Here's the scenario: <ol> <li>Coffee <! -- embedded unordered or ordered list - begin --> <ul> <li>Ap ...

htmllistnested

Choose an option using an input field in HTML and Angular 6

Is it possible in HTML/Angular 6 to create an input field with an arrow on the right that, when clicked, displays a dropdown list of options like a select tag? I tried using datalist but it doesn't give me the desired result. When I enter a value not ...

htmlangulartypescript

Can someone provide assistance on how to add an icon to a button?

Help needed with adding icons to buttons! I am new to coding and struggling with adding icons to each button. If any classes need to be changed, please let me know. I am currently learning HTML and CSS and could use some guidance. Thank you! Example: ...

htmlcss

Enhance the appearance of a class within a shadow DOM using Angular

Displayed by the browser: https://i.sstatic.net/itcrx.png The super-tabs element is a resource. I aim to apply some style to the class .buttons-container from the main component. However, my attempt doesn't yield the desired result: @media (min-widt ...

cssangularsassstylesshadow-dom

"Switching from Mobile to Desktop: Redirecting back to the main

I have recently implemented a PHP mobile redirect on my website: <?php require_once('mobile_device_detect.php'); $mobile = mobile_device_detect(); if($mobile==true){ header('Location:http://www.esielectrical.co.uk/mobile'); }els ...

phphtmlmobile

Put your username onto the page

Is there a method to retrieve and display text inputs? For example: document.getElementById('input_id') <input type="text" placeholder="username" id="input_id"> and the result will be: document.showElementById('box_id') < ...

javascripthtml

Transmitting HTML5 application settings via URL

I am interested in creating an HTML5 app that utilizes the WebAudio API. This app will allow users to customize certain parameters. Users should be able to 'share' these settings by sending a share URL, which can be clicked by others to view the ...

javascripthtmlweb-audio-api

Managing Scripts and Stylesheets with AngularJS Directives

Can I organize all my stylesheets and scripts into a directive for easier management? I'm considering cleaning up my index file by placing them in separate directives like this: <head> <ng-stylesheets></ng-stylesheets> ...

javascriptcssangularjsstylesheet

Incorporate HTML styling into emails generated from PHP

Is there a way to send HTML formatting using PHP scripts? I've been encountering an issue where it displays <b>Example</b> instead of the desired Example. I believe that I need to include HTML headers somewhere, but I'm unsure about t ...

phphtml