What are some effective solutions for reducing large white gaps between images on a webpage using html/css?

Currently working on my portfolio and struggling with the spacing between logo images. The images are too spread out and I can't figure out how to reduce the space to 5px between each image.

<html>
<head>
<title>Welcome to my portfolio! </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font- 
awesome.min.css">

<script>
.logos {
position: absolute; 
top: 40%;
display: flex;}

.img-container {
float:left;
width: 35%;}

</script>

</head>
<body>
<p>Check out my socials!</p></p></div>
    
<div class="logos">
    <div class="img-container">
        <img src="facebook logo.png" width="100%">
    </div>
    <div class="img-container"> 
        <img src="instagram logo.png" width="100%">
    </div>
    <div class="img-container">
        <img src="linkedin logo.png" width="100%">
    </div>
    </div>
</div>  

</body>
</html>

I'm unsure if it's related to how I saved my images, but they were created using Photoshop [1]: https://i.sstatic.net/FtVLC.png

htmlcss

Answer №1

I have successfully identified and fixed errors in your code. There were certain issues with the HTML structure of your code snippet, and it is unnecessary to use float:left when the parent element has a display property of flex.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Static Template</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font- 
awesome.min.css" />
  <style>
    .logos {
      position: absolute;
      top: 40%;
      display: flex;
    }

    .img-container {
      width: 35%;
    }
  </style>
</head>

<body>
  <p>Connect with me on social media!</p>
  </p>
  <div class="logos">
    <div class="img-container">
      <img src="https://via.placeholder.com/150">
    </div>
    <div class="img-container">
      <img src="https://via.placeholder.com/150">
    </div>
    <div class="img-container">
      <img src="https://via.placeholder.com/150">
    </div>
  </div>
  
</body>
</html>

https://codesandbox.io/s/big-white-spaces-67981326-8wdoj?file=/index.html

If you require any further assistance, feel free to reach out.

Answer №2

Check out these code snippets. 

<html>
    
          <head>
            <title>Explore my digital portfolio!</title>

            <style>
              .logos {
                position: absolute;
                top: 40%;
                display: flex;
              }
              
              .img-container {
                flex-direction: row;
                margin-right: 20px;
              }
            </style>

          </head>

          <body>
            <p>Connect with me on social media!</p>
            <div class="logos">
              <div class="img-container">
                <img src="https://via.placeholder.com/50" width="100%">
              </div>
              <div class="img-container">
                <img src="https://via.placeholder.com/50" width="100%">
              </div>
              <div class="img-container">
                <img src="https://via.placeholder.com/50" width="100%">
              </div>
            </div>
          </body>

        </html>

Answer №3

Here is a snippet for you to consider. By removing the padding from the .img-container in this code, the logos will be displayed without any space between them. Feel free to adjust the space as needed.

I have currently set the images to have a 100% width, but you can also specify a static width if preferred.

.logos {
  position: absolute;
  display: flex;
}
.img-container  {
  flex: 1;
  padding: 0 20px;
}
.img-container img {
  max-width: 100%;
}
<link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font- 
awesome.min.css">


<p>Find me on my socials!</p></p></div>
    
<div class="logos">
    <div class="img-container">
        <img src="https://cdn3.iconfinder.com/data/icons/capsocial-round/500/facebook-512.png" width="100%">
    </div>
    <div class="img-container"> 
        <img src="https://www.edigitalagency.com.au/wp-content/uploads/instagram-logo-svg-vector-for-print.svg" width="100%">
    </div>
    <div class="img-container">
        <img src="https://cdn4.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-linkedin-circle-512.png" width="100%">
    </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

The Unique Font That Mysteriously Blocks Fake Italic Styles on Webkit Browsers

Currently, I am utilizing the PT Sans Narrow font in my project, which unfortunately only offers regular and bold styles. As a result, I require the browser to apply faux italics when needed. Strangely, this functionality is only working on non-webkit brow ...

htmlcssfontsfont-facewebfonts

Creating an infinite scroll with a gradient background: a step-by-step guide

I am currently working on a project to develop an infinite scrolling webpage with a dynamic gradient background that changes based on the user's scroll position. While researching, I came across some code for infinite scrolling using time and date. I ...

javascripthtmlcssgradientinfinite-scroll

Discover the power of using SVG sprites in Vue JS for dynamic, visually appealing CSS background

Utilizing an SVG sprite file in a Vue JS HTML template is successful with the following setup: <svg class="icon"> <use xlink:href="~@/assets/images/icons.svg#edit"></use> </svg> The contents of the icons.svg file typically resem ...

cssvue.jssvg

Opening a new tab in Angular 6 from a component with freshly generated HTML (containing input data)

Hello everyone. I have a requirement where I need to open a new browser tab with formatted input data from a modal component. Here's an example code snippet that attempts to achieve this using ng-template: @Component({ template: '< ...

htmlangulartypescript

Internet Explorer 9 fails to recognize angular objects when used inside ngRepeat

One issue I encountered was with the ng-include and ng-controller nested inside an ng-repeat, causing some unexpected behavior in Internet Explorer: Here is a snippet from main.html: <section ng-repeat="panel in sidepanels"> <h2 class="twelve ...

javascripthtmlinternet-explorer-9angularjs

Addressing Layout Problems When I Enlarge the Browser Width

My website is www.adventureswithross.com When the device width is larger than 601px, I have specific requirements: I need the menu and custom header to be seamlessly connected without any spacing in between. To address the issue of space above the custo ...

phphtmlcsswordpress

Shifting gradient hues for illustrations?

One technique I have mastered is creating dynamic gradient colors for text elements using the following CSS: a { &:hover { background: linear-gradient(-45deg, green, yellow, red, blue); background-size: 200% 200%; animation: gradient-movi ...

htmlcssvue.jsfont-awesomevuejs3

What is the procedure for downloading a file within a brackets-shell application?

Currently, I am utilizing Brackets-shell to develop a desktop packaged application designed for both Windows and OSX. This application, which operates within the Brackets shell environment, has the capability to access dynamically generated Excel sheets an ...

htmliframebrowseradobe-bracketsbrackets-shell

The sidebar is refusing to stick. I've exhausted all resources on Stack Overflow trying to fix it

Having issues with the sticky sidebar on my website, I've tried solutions from various Stack Overflow threads: Understanding "position: sticky;" property Fix for position:sticky not working Implementing sticky sidebar when scrolling down/up The is ...

htmlcssbootstrap-4sticky

Choose the element highlighted in the tab

Are there any CSS or jQuery selectors that specifically target elements that have been focused on using the tab key, similar to how anchor tags and form elements are commonly targeted? ...

javascriptjqueryhtmlcssdom

Integrating jQuery Tooltip with Mouseover Event

I'm currently involved in creating a map of MIT projects for an architectural firm, and facing the challenge of maintaining the red dots mouseover state even when the mouse hovers over the tooltips that appear. Presently, the mouseover effect turns of ...

javascriptjqueryhtmlcsstooltip

"Exploring the world: a guide to using map and

I am having trouble with the area tag in my HTML code. <!--images--> <img align="center" src="C:\Users\RS\Pictures\fotoshop\ananimous.png" alt="ananimouse" width=& ...

javascripthtml

"Ensuring content remains within the confines of a modal box

My goal is to integrate a month calendar pop-up within my app using a material UI Modal where users can choose the day. However, I am encountering an issue with the size of the modal not adapting to the calendar properly. How can I resolve this? (To open t ...

cssreactjsmaterial-uimodal-dialog

Passing a jQuery dialog variable for use in a php function using ajax

I am struggling to successfully pass variables from jQuery to a PHP function using AJAX. I have included the necessary HTML and script, but I'm confused as to whether the PHP file specified in the "url:" parameter should be external or can it be follo ...

javascriptphpjqueryhtmlajax

The functionality of aos.css seems to be malfunctioning on a Django-powered website

I recently set up a django backend website and attempted to incorporate CSS in my HTML using the following code snippet. {% load static %} <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-wid ...

cssdjangoaos.js

Can we maintain the flexibility of TDs while having a fixed TABLE?

Edit 08.02.2017: I am not required to support every browser since I am utilizing the latest electron-framework, which is based on Chromium 56.0.2924.87 I have an editable table that is preloaded with data before allowing user edits. In order to print this ...

htmlcsselectron

Styling buttons using CSS for proper alignment

Struggling to center align two buttons on my website, none of the common methods seem to work. It's becoming a headache as nothing else is overriding it. Perhaps I'm missing something. This is my CSS button code: .btn { border-radius: 10px ! ...

htmlcss

Discovering all (full) sublinks on a webpage with lxml in Python

Within this code snippet is a function that takes a URL as input and returns a list of links to pages found on the original URL's page. import urllib import lxml.html def getSubLinks(url): sublinks = [] connection = urllib.urlopen(url) d ...

pythonhtmlurlweb-scrapinglxml

What is the best way to reassess the quantity of a specific element once a for loop has finished executing?

const removeBtnCustom = document.querySelectorAll('.customRemove'); for(let i=0; i<removeBtnCustom.length; i++){ removeBtnCustom[i].addEventListener('click', ()=>{ const itemToDelete = document.querySelectorAll('. ...

javascripthtml

What are the reasons behind my item not triggering an alert even after I have created it, saved it, and attempted to alert it?

I am currently working on a code that allows users to input information which is then stored in an object. However, despite my efforts, when I attempt to retrieve the saved object by alerting one of its values, it indicates that the object does not exist. ...

javascripthtmlobject