Utilizing HTML and CSS to Implement Responsive Design for Centering Items Within a Div on a Web Page

[Here is the output image I am currently seeing:

.featuress{
  width:70%;
  margin-left:20%;
  display: flex;
  align-items: center;
  padding-bottom:30px;
}
.logo{
    min-width: 60px;
    margin:10px;
    text-align:center;
}
.text{
  display: inline-block;
  background-color: #ffa600;
}
body, h2, p {
  margin:0;
}

.featuress{
  width:70%;
  margin-left:20%;
  display: flex;
  align-items: center;
  padding-bottom:30px;
}
.logo{
    min-width: 60px;
    margin:10px;
    text-align:center;
}
.text{
  display: inline-block;
  background-color: #ffa600;
}
body, h2, p {
  margin:0;
}
    <div class="featuress">
    <section id="features">
      <div class="premium">
        <div class="logo1">
      <img class="logo" src="https://cdn-icons-png.flaticon.com/512/70/70535.png" width="40" alt="premium" />
      </div>
      <div class="text text1">
      <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="shipping">
        <div class="logo2">
        <img class="logo" src="https://cdn.pixabay.com/photo/2020/09/14/20/39/vans-5572117__480.png" alt="shipping" width="60" />
        </div>
        <div class="text text2">
        <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 satisfied.</p>
      </div>
      </div>
      <div class="quality">
        <div class="logo3">
        <img class="logo loggo3" src="https://i.pinimg.com/736x/0b/a2/d1/0ba2d192c9b874a4df11af1a90a6d1ad.jpg" alt="quality" width="60"/>
        </div>
        <div class="text text3">
        <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>

[Output style I intended to achieve can be found here.

<div class="featuress">
  <section id="features">
    <div class="premium">
      <div class="logo1">
        <img class="logo" src="https://cdn-icons-png.flaticon.com/512/70/70535.png" width="40" alt="premium" />
      </div>
      <div class="text text1">
        <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="shipping">
      <div class="logo2">
        <img class="logo" src="https://cdn.pixabay.com/photo/2020/09/14/20/39/vans-5572117__480.png" alt="shipping" width="60" />
      </div>
      <div class="text text2">
        <h2>Fast Shipping</h2>
        <p>We make sure you receive your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
      </div>
    </div>
    <div class="quality">
      <div class="logo3">
        <img class="logo loggo3" src="https://i.pinimg.com/736x/0b/a2/d1/0ba2d192c9b874a4df11af1a90a6d1ad.jpg" alt="quality" width="60" />
      </div>
      <div class="text text3">
        <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>

This snippet shows the HTML code I attempted to write with the desired format attached. I'm struggling to align and style this specific part of the site using CSS. Any help on achieving this would be greatly appreciated.

htmlcss

Answer №1

You can utilize the power of display:flex and align-items:center to enhance your features. I have applied some styling adjustments to make it better suit your screen.

body, h2, p {
  margin:0;
}
.feature {
  display:flex;
  align-items: center;
  padding-bottom:30px;
}
.logo{
  min-width: 60px;
  margin:10px;
  text-align:center;
}
<div class="feature">
  <div class="logo">
    <img src="https://cdn-icons-png.flaticon.com/512/70/70535.png" width="40"/>
  </div>
  <div>
    <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="feature">
  <div class="logo">
    <img src="https://cdn.pixabay.com/photo/2020/09/14/20/39/vans-5572117__480.png" width="60" />
  </div>
  <div>
    <h2>Fast Shipping</h2>
    <p>We make sure you receive your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
  </div>
</div>    
<div class="feature">
  <div class="logo">
    <img src="https://i.pinimg.com/736x/0b/a2/d1/0ba2d192c9b874a4df11af1a90a6d1ad.jpg" width="60" />
  </div>
  <div>
    <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>

EDIT

Here is an example of how display:flex can be used effectively, refer to Flexbox (MDN).

.container{
  border:1px solid black;
}
.d-flex{
  display:flex;
}
.orange{
  background-color:orange;
}
.green{
  background-color:green;
}
.pink{
  background-color:pink;
}
<div class="d-flex container">
  <div class="box-container orange">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
  </div>
  <div class="box-container green">
    <div class="box">D</div>
    <div class="box">E</div>
    <div class="box">F</div>
  </div>
  <div class="d-flex box-container pink">
    <div class="box">G</div>
    <div class="box">H</div>
    <div class="box">I</div>
  </div>
</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

Steps to handle the change event of a p:inputText element

In my current setup, I am utilizing p:inputText and have the need to trigger a javascript function that will update the searchField in the backend bean. <p:inputText required="true" placeholder="#{cc.attrs.searchTip}" value="#{cc.attrs.queryProperty}" ...

javascriptjqueryhtmlprimefaces

Attempting to determine the smallest and largest dimensions of two values using CSS3

Trying to make sure the image on my phone adjusts its size based on orientation, I attempted using Ionic4. When in landscape mode, I want it to adapt according to height instead of width. Essentially, I need it to use the minimum size and also require the ...

cssionic-frameworkimage-size

Prevent selection of specific weekdays in Kendo grid calendar

When editing a record in a Kendo grid with a date field, is there a way to only allow the selection of Monday and disable all other days of the week? ...

javascriptjqueryhtmlkendo-uikendo-grid

Scrolling background for a nested Bootstrap modal

I am facing an issue with a modal that has a lengthy content and a button to open another modal. Once the inner modal is closed, the outer modal becomes unresponsive. It fails to scroll and instead, the background starts to scroll. While I have come acros ...

javascriptjqueryhtmlcsstwitter-bootstrap

Unlocking the parallax effect with your grandchildren: A guide to creating memorable

I have successfully implemented the parallaxing background effect several times before on Codepen and in small, experimental projects. My go-to tutorial for this technique is this one by Keith Clark. Here is the structure outlined in the tutorial: <d ...

htmlcss

Navigational Scroll Parallax Issues

I have been trying to implement a basic 2 layer parallax effect using ScrollMagic on my index page. The layout consists of a large image with content below it, but I am facing some challenges. Despite going through the documentation and source code multipl ...

jqueryhtmlcssparallaxscrollmagic

Troubleshooting Problem with Accordion Size in CSS

I am facing an issue with a dropdown menu that I have created. The dropdown has parent and child rows to display controls, but the width of the Accordion is not stretching as expected despite being set to 100%. Using Chrome and Edge developer tools, I insp ...

javascripthtmljquerycsssharepoint

How can I trigger the second animation for an object that is constantly moving within a specific range in the first animation?

I am looking to create a simulation of rising and falling sea levels. Currently, when I click the button, the level rises from its starting point to the top, but I am unsure how to achieve this effect in my code. Below is the code I have written so far, an ...

javascriptcssanimation

Finding an alternative to VB.NET's smtp.Send in jQuery/JavaScript to send emails

I am currently updating the Contact Us section of my web application, transitioning from VB.Net to jQuery/JavaScript. Currently, the section only includes fields for email Subject and body. The mailTo address is specified in my VB.Net .CS file and web.con ...

javascriptjqueryasp.nethtml

The Twitter widget functions properly upon initial loading, but subsequently malfunctions

I have a web application built using the Play Framework that utilizes Ajax to load view html pages into a 'container' div. $( "#container" ).load("/contactUs"); // The contactUs page contains the widget In one of my html pages, I include a Twit ...

javascripthtmlcsstwitter

Can two text boxes trigger the resetting of a global variable with the same event?

I have encountered an issue with two text boxes and a label in my code. Both text boxes share a common event handler that is designed to work for any text box. The problem arises when I attempt to add the values from both text boxes to a global variable - ...

c#htmlasp.netwebforms

Can you tell me where the templates store their icons?

Hey there, thank you for taking the time to read my question. I have a template that can be found at this link: In the top left corner of the template, there is an icon of a home. I have copied the entire website, including images, css, and js files, but ...

htmlcss

Tips for keeping the footer consistently at the bottom of the page without using a fixed position (to avoid overlapping with the main content)

I've been struggling to keep the footer at the bottom of my webpage. I came across a solution online suggesting to use fixed CSS positioning. However, when I applied this fix, the footer ended up overlapping with the actual content on the page. Is the ...

htmlcsstwitter-bootstrapbootstrap-4

I am unable to zoom in on the picture located in the navigation bar

(https://i.sstatic.net/epWYL.png)](https://i.sstatic.net/OHEq8.png) I am struggling to increase the size of the logo in the navbar, despite trying different values. How can I solve this issue? Although I successfully changed the position of the picture, ...

htmlcsswebbootstrap-4frontend

Troubleshooting the issue with dynamically adding form fields in AngularJS

I am currently working on an online course application and facing an issue with adding form fields dynamically to include additional video lectures for each course. When I attempt to click on the "Add Another URL" button, nothing happens. https://i.sstatic ...

javascriptangularjshtmlangularjs-directiveangularjs-scope

Updating the video tag's source attribute using JSON information

I am in the process of creating a unique video player using HTML and Javascript that will sequentially play a set of videos until all 6 have been displayed. The URLs for these videos are stored within an array that is mapped in a .json file named clips.jso ...

javascripthtmlajaxjsonhtml5-video

Different ways to update background hues in Reactstrap

I am currently working on styling an application with reactstrap, and I'm facing a challenge in changing the background color of the navigation bar from white to black. I tried setting the color attribute to "dark" in the nav tabs tag, but it didn&apo ...

cssreactjstwitter-bootstrapreactstrap

Looping through options in a dropdown menu in an HTML select element

I need to work with a select tag and cannot use the asp dropdownlist. The issue I'm facing is that the select tag is not visible unless it has a runat=server. However, when I add runat=server, I encounter an error saying that I cannot include a repea ...

c#htmlasp.netwebformsrepeater

Enabling a JSON file property to be clickable as needed

I am working with a JSON file obtained from an API call, which contains various objects. My goal is to display the message property of each object, some of which may contain hyperlinks within the message. Here is the HTML code I have implemented to make t ...

javascripthtmljsonobjectdom

Issue with !important keyword taking precedence not resolved

While working on a navigation bar button, I encountered a specificity conflict with the opacity property. I attempted to use the !important override but it doesn't seem to be taking effect. Any insights into why this might be happening? Here is the H ...

htmlcsscss-specificity