1

How can I remove the anchor tag around the blank space of the images? Right now the blank spaces are clickable and I don't want that. Hover over the blank spaces around the images and you'll get what I'm talking about. The codepen link is https://codepen.io/sakirinteser/pen/rGvbmO

.portfolio h2 {
  text-align: center;
  font-size: 2.5em;
  color: #27292d;
  padding-top: 4%;
  line-height: 1.3;
}

.port {
  text-align: center;
  color: #27292d;
  padding-bottom: 3%;
}

.thumbs {
  display: flex;
  justify-content: space-around;
  margin-bottom: 2%;
}

.thumbs img {
  width: 60%;
  padding: 0 !important;
}

.portfolio a {
  margin: 0 auto;
  text-align: center;
}
<div class="portfolio">
  <section>
    <h2>Past Work</h2>
    <p class="port">We have worked on a diverse range of projects in the past, here is a quick snapshot:</p>

    <div class="thumbs designthumbs">
      <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a>
      <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a>

    </div>

    <div class="thumbs">
      <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a>
      <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a>
    </div>
  </section>
</div>

How can I remove the a tag's padding from the blank spaces around the images? Any help is appreciated.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Sakir Inteser
  • 71
  • 12

5 Answers5

3

Control the width of the flex item, not the image.

More specifically, set the flex item to your preferred width, then make the images inside take full width (width: 100%).

Instead of this:

.thumbs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 2%;
}

.portfolio a {
    margin: 0 auto;
    text-align: center;
}

.thumbs img{
    width: 60%;
    padding: 0 !important;
}

Try this:

.thumbs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 2%;
}

.portfolio a {
    flex: 0 0 25%; /* new; flex-grow: 0, flex-shink: 0, flex-basis: 25% */
    /* margin: 0 auto; */
    /* text-align: center; */
}

.thumbs img {
    width: 100%; /* new */
    padding: 0 !important;
    vertical-align: top; /* optional; to remove descender space;
                            https://stackoverflow.com/q/31444891/3597276 */
}

https://codepen.io/anon/pen/pWVmzy

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Could you explain what flex: 0 0 25%; is? Or link me to a documentation about it? I'm currently on mobile and your answer works, I will mark it as a correct answer once I test it on my desktop. Thank You. – Sakir Inteser Oct 10 '17 at 18:30
  • 1
    It's a shorthand for `flex-grow`, `flex-shrink` and `flex-basis`. In this case, it's saying, *don't grow*, *don't shrink*, set a fixed width of 25%. – Michael Benjamin Oct 10 '17 at 18:59
0

make the .portfolio a{ width: 60%} and change .thumbs img { width: 100%;}

Jordan.J.D
  • 7,999
  • 11
  • 48
  • 78
Ilian Futekov
  • 174
  • 1
  • 8
0

Because of a downvote without explanation , i have to explain a couple of things (or asked)

<percentage>

Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block. If the containing block's width depends on this element's width, then the resulting layout is undefined in CSS 2.1. Note: For absolutely positioned elements whose containing block is based on a block container element, the percentage is calculated with respect to the width of the padding box of that element.

This is a change from CSS1, where the percentage width was always calculated with respect to the content box of the parent element.

  • In this case , img is not a block and not a direct child of body, width of parent is basicly unknown so we might have 60% x null which gives null, nothing to apply really

    • but here we have a flex child ... it coud work without the need to set a width on the parent, but then if image is 60% of its parent ... parent cannot be 100% of it's own 60%. hmm something wrong here in the logic, isn't ?

So To avoid miscalculation and funny results, be clear , you may use vw or any units but % to make width be properly set and calculated ...

/* trick to see where elements stand */

* {/* see me */box-shadow:0 0 0 2px red}

.portfolio h2{
 text-align: center;
 font-size: 2.5em;
 color: #27292d;
 padding-top: 4%; 
 line-height: 1.3;
}

.port{
 text-align: center;
 color: #27292d;
 padding-bottom: 3%;
}

.thumbs{
 display: flex; 
 margin-bottom: 2%;
  /*padding:0 6.25vw; *//* a quart of img 's width that you can also calculate and set as  padding to even the three blank space */
  justify-content:space-around;
}

.thumbs img{
 max-width: 25vw;
  vertical-align:top;
}

.portfolio a.swipebox{
  margin: 0 auto;
  text-align: center;
  flex-shrink:1;
}
<div class="portfolio">
  <section>
   <h2>Past Work</h2>
   <p class="port">We have worked on a diverse range of projects in the past, here is a quick snapshot:</p>
   <div class="thumbs designthumbs">
    <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a>
        <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a>
    
   </div>

   <div class="thumbs">
    <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a>
        <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a>
   </div>  
  </section>
 </div>

fork of your pen

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • The percentage problem on padding / margin only applies to flex items, not flex containers. – Michael Benjamin Oct 10 '17 at 18:29
  • 1
    @Michael_B FF has been often buggy abouts when image is resized it does at screen, but not from the space it initially uses ... vw units avoids this funny behavior i have noticed lately. No idea if any bugs has been officialy written about this or if there's something else involved. didn't dig – G-Cyrillus Oct 10 '17 at 18:32
0

Ok, I think I see what you were trying to do. You have your images set to width:60%, but they're inside an anchor that's fully half of the thumbs container. So, really, your images are 60% of half of the container, but the anchors are still fully half.

By default the flex property on your anchors will be flex: 0 1 auto, which is short hand for don't grow, do shrink, and determine the width of this flex element automatically. auto in this case will distribute all of the available space from the containing element to the child elements.

In your case, with two anchors, both of them were given the remaining space in their container and they ended up each with half the width.

So, I switched your images to 100% (the full width of their containing anchor). And then changed the anchors flex property to flex: 0 1 30%. So they'll be 30% of the width of their containing element. Now you shouldn't have any clickable space in the margins:

.portfolio h2 {
  text-align: center;
  font-size: 2.5em;
  color: #27292d;
  padding-top: 4%;
  line-height: 1.3;
}

.port {
  text-align: center;
  color: #27292d;
  padding-bottom: 3%;
}

.thumbs {
  border: 2px solid black;
  display: flex;
  justify-content: space-around;
  margin-bottom: 2%;
  width: 500px;
}

/*.portfolio a*/
.thumbs a {
  border: 2px dotted red;
  flex: 0 1 30%;
  /*margin: 0 auto;*/
  text-align: center;
}

.thumbs img {
  border: 2px solid black;
  width: 100%;
  /*padding: 0 !important;*/
}
<div class="portfolio">
  <section>
    <h2>Past Work</h2>
    <p class="port">We have worked on a diverse range of projects in the past, here is a quick snapshot:</p>

    <div class="thumbs designthumbs">
      <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a>
      <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a>

    </div>

    <div class="thumbs">
      <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a>
      <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a>
    </div>
  </section>
</div>
worc
  • 3,654
  • 3
  • 31
  • 35
0

.portfolio h2 {
  text-align: center;
  font-size: 2.5em;
  color: #27292d;
  padding-top: 4%;
  line-height: 1.3;
}

.port {
  text-align: center;
  color: #27292d;
  padding-bottom: 3%;
}

.thumbs {
  display: flex;
  justify-content: space-around;
  margin-bottom: 2%;
}

.thumbs img {
  width: 100%;
  padding: 0 !important;
}

.portfolio a {
  margin: 0 auto;
  text-align: center;
  width: 30%;
}
<div class="portfolio">
  <section>
    <h2>Past Work</h2>
    <p class="port">We have worked on a diverse range of projects in the past, here is a quick snapshot:</p>

    <div class="thumbs designthumbs">
      <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a>
      <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a>

    </div>

    <div class="thumbs">
      <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a>
      <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a>
    </div>
  </section>
</div>
Ilian Futekov
  • 174
  • 1
  • 8