The images inside the div element are occupying excessive space beyond what is necessary

I am working on a footer section and I have encountered an issue where the div inside a section is taking up more width than needed. How can I resolve this problem?

Here is how it appears:

https://i.sstatic.net/PGv7H.png

This is the code snippet:

footer {
  background-color: #1a1a1a;
  height: 100%;
  padding: 4rem;
}

#footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

#footer .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* justify-content: center; */
  margin: 0 2rem;
}

#contact-handle {
  width: 400px;
}

#contact-handle img {
  width: 40%;
  position: relative;
  right: 0.5rem;
}

#footer h4 {
  color: white;
  font-weight: 500;
  font-size: 18px;
}

#footer p {
  color: grey;
  font-size: 1rem;
  margin: 0;
  margin-bottom: 1rem;
  text-align: left;
}

#footer i {
  color: grey;
  margin-right: 1rem;
}

#footer .button {
  display: flex;
}

#footer .button img {
  width: 15%;
  margin-right: 1rem;
}
<footer>
  <section id="footer">
    <div id="contact-handle" class="container">
      <img src="images/logo.png" alt="">
      <h4>Contact</h4>
      <p>Address: XXX ABCDE Road, Street 32, Mumbai</p>
      <p>Phone: (+91) 01234 56789/(+01) 2222 365</p>
      <p>Hours: 10:00 - 18:00, Mon - Sat</p>
      <br>
      <h4>Follow Us</h4>
      <div class="social_media">
        <i class="fa-brands fa-facebook-f"></i>
        <i class="fa-brands fa-twitter"></i>
        <i class="fa-brands fa-instagram"></i>
        <i class="fa-brands fa-youtube"></i>
      </div>
    </div>

    <div id="About" class="container">
      <h4>About</h4>
      <br>
      <p>About Us</p>
      <p>Delivery Information</p>
      <p>Privacy Policy</p>
      <p>Terms & Conditions</p>
      <p>Conatct Us</p>
    </div>

    <div id="Account" class="container">
      <h4>My Account</h4>
      <br>
      <p>Sign In</p>
      <p>View Cart</p>
      <p>My Wishlist</p>
      <p>Track Order</p>
      <p>Help</p>
    </div>

    <div id="App_gateway" class="container">
      <h4>Install App</h4>
      <br>
      <div class="button box">
        <img src="images/Footer-img/app-store.png">
        <img src="images/Footer-img/google-play.png">
      </div>
  </section>
</footer>
htmlcssfooter

Answer №1

If you're looking to have all flex children share the same width, just add flex-basis: 100%. This will ensure that each child has an equal "weight" when determining their lengths.

footer {
  background-color: #1a1a1a;
  height: 100%;
  padding: 4rem;
}

#footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

#footer .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* justify-content: center; */
  /*margin: 0 2rem;*/
  flex-basis: 100%;
}

#contact-handle {
  width: 400px;
}

#contact-handle img {
  width: 40%;
  position: relative;
  right: 0.5rem;
}

#footer h4 {
  color: white;
  font-weight: 500;
  font-size: 18px;
}

#footer p {
  color: grey;
  font-size: 1rem;
  margin: 0;
  margin-bottom: 1rem;
  text-align: left;
}

#footer i {
  color: grey;
  margin-right: 1rem;
}

#footer .button {
  display: flex;
}

#footer .button img {
  width: 15%;
  margin-right: 1rem;
}
<footer>
  <section id="footer">
    <div id="contact-handle" class="container">
      <img src="images/logo.png" alt="">
      <h4>Contact</h4>
      <p>Address: XXX ABCDE Road, Street 32, Mumbai</p>
      <p>Phone: (+91) 01234 56789/(+01) 2222 365</p>
      <p>Hours: 10:00 - 18:00, Mon - Sat</p>
      <br>
      <h4>Follow Us</h4>
      <div class="social_media">
        <i class="fa-brands fa-facebook-f"></i>
        <i class="fa-brands fa-twitter"></i>
        <i class="fa-brands fa-instagram"></i>
        <i class="fa-brands fa-youtube"></i>
      </div>
    </div>

    <div id="About" class="container">
      <h4>About</h4>
      <br>
      <p>About Us</p>
      <p>Delivery Information</p>
      <p>Privacy Policy</p>
      <p>Terms & Conditions</p>
      <p>Conatct Us</p>
    </div>

    <div id="Account" class="container">
      <h4>My Account</h4>
      <br>
      <p>Sign In</p>
      <p>View Cart</p>
      <p>My Wishlist</p>
      <p>Track Order</p>
      <p>Help</p>
    </div>

    <div id="App_gateway" class="container">
      <h4>Install App</h4>
      <br>
      <div class="button box">
        <img src="images/Footer-img/app-store.png">
        <img src="images/Footer-img/google-play.png">
      </div>
  </section>
</footer>

Answer №2

footer {
  background-color: #1a1a1a;
  height: 100%;
  padding: 4rem;
}

#footer {
  display: flex;
  align-items: flex-start;
}

#footer .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 1rem;
}

#contact-handle {
  width: 400px;
}

#contact-handle img {
  width: 40%;
  position: relative;
  right: 0.5rem;
}

#footer h4 {
  color: white;
  font-weight: 500;
  font-size: 18px;
}

#footer p {
  color: grey;
  font-size: 1rem;
  margin: 0;
  margin-bottom: 1rem;
  text-align: left;
}

#footer i {
  color: grey;
  margin-right: 1rem;
}

#footer .button {
  display: flex;
}

#footer .button img {
  width: 15%;
  margin-right: 1rem;
}
<footer>
  <section id="footer">
    <div id="contact-handle" class="container">
      <img src="images/logo.png" alt="">
      <h4>Contact</h4>
      <p>Address: XXX ABCDE Road, Street 32, Mumbai</p>
      <p>Phone: (+91) 01234 56789/(+01) 2222 365</p>
      <p>Hours: 10:00 - 18:00, Mon - Sat</p>
      <br>
      <h4>Follow Us</h4>
      <div class="social_media">
        <i class="fa-brands fa-facebook-f"></i>
        <i class="fa-brands fa-twitter"></i>
        <i class="fa-brands fa-instagram"></i>
        <i class="fa-brands fa-youtube"></i>
      </div>
    </div>

    <div id="About" class="container">
      <h4>About</h4>
      <br>
      <p>About Us</p>
      <p>Delivery Information</p>
      <p>Privacy Policy</p>
      <p>Terms & Conditions</p>
      <p>Conatct Us</p>
    </div>

    <div id="Account" class="container">
      <h4>My Account</h4>
      <br>
      <p>Sign In</p>
      <p>View Cart</p>
      <p>My Wishlist</p>
      <p>Track Order</p>
      <p>Help</p>
    </div>

    <div id="App_gateway" class="container">
      <h4>Install App</h4>
      <br>
      <div class="button box">
        <img src="images/Footer-img/app-store.png">
        <img src="images/Footer-img/google-play.png">
      </div>
  </section>
</footer>

I made adjustments to the CSS code by removing justify-content: space-between from #footer and reducing the margin for #footer .container.

Answer №3

Avoid using display: flex; within your .wrapper.

Instead, try utilizing display: relative; and specify a min-width: 150px; to ensure precise alignment of the elements.

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

Outlook issue with table sizing

I'm trying to display a table with 14 columns in Outlook mail, but the column headings are too long and don't fit on one line. I've tried setting widths for each column, but the entire table doesn't widen as expected. For example, if I ...

htmloutlookoutlook-2007html-table

Table Collapse with Bootstrap Framework

I am currently facing an issue where I can only collapse a single row when clicking on the parent row. However, my requirement is to be able to close multiple rows simultaneously. Here is the code I am using, but I am struggling to figure out how to colla ...

htmlcsstwitter-bootstrap

Could you lend me a hand retrieving the original text you submitted for paraphrasing

I have the following code snippet for a Bootstrap navigation bar: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootst ...

htmlbootstrap-4nav

What is the best way to retrieve the initial <ul> element from a JavaScript document?

Just to clarify, I'm looking to target a specific div with a class and the first <ul> from a document (specifically in blogger). Currently, I have a JavaScript function that grabs the first image and generates a thumbnail as shown below: //< ...

javascripthtml

How to keep jQuery horizontal submenu open when clicking on the menu

Seeking assistance with a menu issue. I have a horizontal menu with subitems that display when clicked, but having trouble with the submenu behavior. When clicking on a submenu item, I want it to remain open and show the related items underneath it. For ex ...

jqueryhtmlcsssubmenu

CSS Dynamix - Include the parameter ?value to resolve caching issues

I came across a discussion on the issue of Dynamic CSS caching problem where it was suggested to append ?value to the end of the css file name for better caching. I am currently using themes and the css files are loaded automatically. Is it possible to use ...

csscachinghttphandler

Unable to eliminate the unwanted space at the top of the division

I am encountering an issue where I have a div containing a label, but there seems to be some unwanted space above the div that I can't seem to remove. It's puzzling me as to why this space is appearing. Query: What could be causing the space ab ...

htmlcss

Is it possible in JavaScript to have three different input values contribute to a sum without using HTML event attributes?

I've been working my way through the 57 programming exercises book by Brian P. Hogan. For most of these exercises, I've been attempting to create a GUI. In this particular exercise, the goal is to calculate the Simple Interest on a Principal am ...

javascripthtmlarraysuser-interface

How to Style CSS specifically for Internet Explorer?

I'm dealing with a simple div that has a 2px thick border and absolute positioning, but it's hidden until its parent element is hovered over. The issue arises in IE due to the box model, causing the position of this div to be somewhat off in IE c ...

htmlcssinternet-explorerbrowser

I'm having trouble getting my PrimeNG Calendar component to line up correctly

::ng-deep p-calendar.calendar-control > span > input.p-inputtext { border: 1px solid black; background: #eeeeee; text-align: center !important; } The content is not properly centered. <p-calendar dateFormat="mm/dd/yy&qu ...

cssangularprimengng-deep

Eclipse Content Assist feature appears to be malfunctioning as it fails to display

Having an issue with Eclipse on Win 10 (64bit) when working with JavaScript projects. I've tested this problem on both Eclipse Photon and version 2018-09 (64 bit versions) and encountered the same problem on both instances: After creating a new JavaS ...

javascriptcsshtmleclipsecontent-assist

I'm having trouble getting my HTML to scroll properly

Apologies for asking a common question, but I'm facing a specific issue with scrolling that I can't seem to figure out. Below is the code snippet: * { font-family: Arial, Helvetica, sans-serif; text-align: center; font-size: 40px; } < ...

htmlcssscroll

Is there a way to keep a section of an animated class in place?

My website features an animated retractable menu bar with two separate menus. Clicking on one icon activates a sliding motion to reveal that particular menu while causing the second menu to retract in a similar fashion. To achieve a smooth transition effec ...

javascripthtmlcss

Folding into itself lies another folding

While attempting to nest a collapse area inside another collapse, I encountered an issue. Upon clicking to open the first collapse, it functions perfectly. However, when trying to open the second collapse (nested within the first one), it inadvertently cl ...

htmlbootstrap-4

The inclusion of Jquery Mobile causes CSS to malfunction

After integrating jQuery Mobile into my HTML via a CDN, I noticed that it completely overrides my styles and disrupts my design. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> <script src="http:// ...

jqueryhtmlcssjquery-mobile

Position the input element in the middle of the div

Is it possible to center a form input element within a div element without it changing position when the browser window size is adjusted? I attempted using margin: auto and position: relative, but encountered issues with the element moving. How can this be ...

htmlcss

Android tablet (Nexus) optimized for full-height website viewing

I have been attempting to retrieve the Nexus tablet's height by using $(window).height();, but I am encountering difficulties because it seems to include the height of the URL bar in the result, which disappears when the user scrolls. My webpage is d ...

androidjquerycssweb

What is the best way to ensure the navigation bar stays at the top of the window once it has reached

I have a sample js fiddle provided here. The navigation bar is positioned right below the "Hello World" section, and the content follows beneath the nav bar. Is there a way to make the navigation bar stick to the top of the window once it reaches that poin ...

htmlcssfixednav

Using a CSS hack to create a border cutout

The Dilemma... I am attempting to position div elements over a border, while maintaining space on both sides of each div. Take a look at the scenario: Note the gaps surrounding the black divs. I am struggling to find a solution for this issue, aside fro ...

htmlcss

Adjusting the size of the browser window relocates the <nav> elements

My webpage layout seems to be changing when I resize my browser, causing the elements to move with the vertical scrollbar. How can I keep them fixed at the top? This is the HTML5 code I'm using: <header id="container"> <div id="logo ...

htmlcss