After examining the width properties in the CSS code, it was discovered that one particular icon is larger in

Is there a way to adjust the width of the first icon in my container using CSS? The first icon appears larger than the others, and I'm having trouble making it the right size.

#features {
    margin-top: 35px;
}

.grid {
    display: flex;
}

#features .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20vw;
    height: 125px;
}

#features .desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px;

}
<html>
<head>
<link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<div class="container">
            <section id="features">
                <div class="grid">
                    <div class="icon">
                        <i class="fa fa-3x fa-fire"></i>
                    </div>
                    <div class="desc">
                        <h2>Premium Materials</h2>
                        <p>Our trombones use the shiniest brass sourced locally, increasing longevity.</p>
                    </div>
                </div>
                <div class="grid">
                    <div class="icon">
                        <i class="fa fa-3x fa-truck"></i>
                    </div>
                    <div class="desc">
                        <h2>Fast Shipping</h2>
                        <p>Your trombone ships quickly, with free returns if unsatisfied.</p>
                    </div>
                </div>
                <div class="grid">
                    <div class="icon">
                        <i class="fa fa-3x fa-battery-full"></i>
                    </div>
                    <div class="desc">
                        <h2>Quality Assurance</h2>
                        <p>We guarantee no damages or faults, testing your instrument's pitch.</p>
                    </div>
                </div>
            </section>
        </div>

htmlcssfont-awesome

Answer №1

Modify width to min-width

#features {
    margin-top: 35px;
}

.grid {
    display: flex;
}

#features .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20vw; /* Adjusted Here*/
    height: 125px;
}

#features .desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px;

}
<html>
<head>
<link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<div class="container">
            <section id="features">
                <div class="grid">
                    <div class="icon">
                        <i class="fa fa-3x fa-fire"></i>
                    </div>
                    <div class="desc">
                        <h2>Premium Materials</h2>
                        <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
                    </div>
                </div>
                <div class="grid">
                    <div class="icon">
                        <i class="fa fa-3x fa-truck"></i>
                    </div>
                    <div class="desc">
                        <h2>Fast Shipping</h2>
                        <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not statisfied.</p>
                    </div>
                </div>
                <div class="grid">
                    <div class="icon">
                        <i class="fa fa-3x fa-battery-full"></i>
                    </div>
                    <div class="desc">
                        <h2>Quality Assurance</h2>
                        <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
                    </div>
                </div>
            </section>
        </div>

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

Is there a way to modify the appearance of a text box to suit individual preferences?

Is it possible to alter the shape of a text box, creating a rectangle with a portion removed from one side? I have included an example image for reference. https://i.sstatic.net/oNyum.png I came across clip-path: polygon in CSS, but it seems to only accep ...

htmlcsstextbox

perfecting the styling of a tab management system

For reference, please check out the following link: http://jsfiddle.net/XEbKy/3/ In my design, I have organized two layers of tabs. The top layer consists of two tabs while the bottom layer has three tabs. My goal is to have all these tabs neatly enclosed ...

css

Can you assist in resolving this logical problem?

exampleDEMO The code above the link demonstrates how to control input forms based on a button group selection. In this scenario, when a value is inputted on the 'First' Button's side, all input forms with the same name as the button group ...

javascripthtmlangularjs

The full screen menu is exclusively displayed in the navigation bar

My HTML and CSS code is causing an issue where the full-screen menu only appears in the nav bar. This problem seems to be specific to Safari. To solve the issue, I need to remove the following code: .nav { position: fixed; } However, I still ...

javascripthtmlcss

Emulate a link click using key input

Hey there! I have this link example: <a href"http://google.es">Link</a> I'm wondering if it's possible to use JavaScript or a similar tool so that when I press a specific key, like the number 5 on the keyboard, it acts as if I click ...

javascripthtml

Ways to access the entire parent element, rather than just the individual child element, following the use of e.target

Looking to target the li element itself when clicked, rather than its child elements. The goal is to determine which specific option the user selects from a dropdown menu using event.target in jQuery. If the user chooses an li with a class of 1, set one gl ...

javascriptjqueryhtmlevents

Guide on leveraging event delegation to trigger a function depending on the id of the clicked element

Although I have experience with event delegation, I am currently facing a challenge in setting up a single event listener that can execute one of three functions based on the ID of the element clicked. Here is the existing code without event delegation: ...

javascripthtml

Issue with styled-components not being exported

Issue: ./src/card.js There was an import error: 'Bottom' is not exported from './styles/cards.style'. card.js import React from 'react' import { Bottom, Color, Text, Image } from "./styles/cards.style"; fu ...

javascripthtmlcssreactjsstyled-components

Struggling to set the background color for a div element

I am dealing with the following HTML and CSS: <div id="com_loaded"> <div id="com_loaded_userpic"><a href="#" class="tooltip"><img src="pic.jpg" class="img_poster" /><span>Username</span></ ...

htmlbackground-color

Is there a way to retrieve the initial value from the second element within the JSON data?

Exploring JSON Data Collections In my JSON data, I have two collections: FailedCount and SucceededCount. { "FailedCount": [{ "FailedCount_DATE_CURRENT_CHECK": "2016-11-30 10:40:09.0", "FailedCount_DATE__CURRENT__CHECK": "10:40:09", "FailedCo ...

javascripthtmljsonreturn-value

Utilize jQuery function within an HTML form

I am trying to integrate my jQuery function with an HTML tag for my login form that connects to an Azure database. I want a modal pop-up to appear when the client presses the Login button, displaying a specific message based on whether the user is in the d ...

javascriptjqueryhtmlformsfunction

Tips on adding space between a material icon and its corresponding description

I have a design that needs some adjustments. The material icon is too close to the description, and I attempted to create padding by adding the following CSS: .location-secondary-info span:first-child { padding-right: 5px; } However, this change did no ...

cssreactjssassgoogle-material-icons

HTML and CSS are distinct entities with their own individual purposes and

Can you create custom entities? For example: &longline; --> ----------------------------- and then incorporate it in HTML code: <div> &longline; bla bl bla </div> ...

htmlcss

How can I stack one column beneath two columns in a unique format?

I am looking to create a layout similar to the one depicted below. https://i.sstatic.net/m1aCj.png The window is represented by the red box, and the black boxes represent the <div> elements. I have attempted to arrange the image into two columns, bu ...

htmltwitter-bootstrapbootstrap-4

Scrolling through image galleries with automatic thumbnails

I am looking to create an automatic image scrolling feature on my webpage using a bunch of images I have. I have searched for a solution but have not found one that fits my requirements. I don't think a carousel is the right approach for this. The sol ...

javascriptjqueryhtmlcssbootstrap-4

Leveraging static elements in a fluid design using solely CSS whenever feasible

Here's a question that requires some logical thinking rather than technical expertise. I've created a design where the header and footer are always fixed at the top and bottom of the window, respectively. However, the elements inside have percen ...

cssresponsive-designfixed

Bootstrap sticky footer with adjustable height

Striving to achieve a sticky footer with a custom height on my website has turned out to be more challenging than I initially expected. Presented below is a snapshot of the current state of my footer: https://i.sstatic.net/SXaTA.png The issue arises whe ...

htmlcsstwitter-bootstrapfootersticky

Searching for data in a bootstrap table that is not case-sensitive

Searching for and highlighting text within a bootstrap table has proven to be a challenge. Check out the Fiddle for an example: https://jsfiddle.net/99x50s2s/74/ HTML <table class='table table-bordered'> <thead> <tr& ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using Jquery to set values for css properties

I've recently started using jquery and I have a task related to a drop-down menu that I'm struggling with: if (scrnwidth <= 761) { if (display was block) { //Defaultly testi has display:none property. testi = m ...

javascriptjquerycss

Continuously updating C# HTML parsing

I am facing a challenge with my webpage that is using AJAX queries to display data, as I need to parse this data in a C# program. The issue arises when I try to view the source code of my webpage, which does not show the data due to it being automatically ...

c#htmlajaxweb-scraping