Photoshop Question posted in
The official user guide can be found here.

How to fix big white spaces in between my images in html/css? – Photoshop

Im trying to do up a portfolio but I cant seem to rid off the spaces in between my logo images.
The images are very spaced out and I cant seem to find the method on how to compact my images with a padding of 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>Find me on 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 am not sure if it is due to the way i saved my images, but this is done on photoshop
[1]: https://i.stack.imgur.com/FtVLC.png

Tags:

3

Answers


  1. 0

    I have fixed noticed errors in your code. There were some HTML code issues in your code snippet & also no need to float:left when the parent is 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>Find me on my socials!</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

    Let me know if you need further support.

    Login or Signup to reply.
  2. 0

    Please try these lines of code.

        <html>

    <head>
      <title>Welcome to my portfolio! </title>

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

        .img-container {
          flex-direction: row;
          margin-right: 20px;
        }
      </style>

    </head>

    <body>
      <p>Find me on my socials!</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>
      </div>

    </body>

    </html>
    Login or Signup to reply.
  3. 0

    Please find the below snippet. If you remove the padding given to .img-container in this snippets, there will not be any space between the logos. You can update the space required.

    Currently I have given 100% width to my images, you can change it and give a static width as well.

    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search