Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by catherine paris
catherine paris
2,705 Points

Can't figure out how to eliminate gap between images plus have both images be the same height but still be responsive

Can't figure out how to eliminate gap between images plus have both images be the same height but still be responsive. These 2 images comprise the home page so I want them to the same height no matter the screen size. also I keep trying float and display inline but I can't eliminate the gap.

https://codepen.io/blkgurlcode/pen/qqVebV/

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Catherine,

I noticed that you have 2 copies of each image in the html and you've also applied these images as background images to the img element. I wasn't sure why you did all that.

You should only have 1 copy of each image and it would either be in the html or the css. Which one depends on whether those images are part of the content of the page or a design element.

Can you clarify what you want for same height? Do you mean that you want the wood image to take up 5 columns and the texture image to take up 7 columns but both will be the same height?

catherine paris
catherine paris
2,705 Points

jason anello If I keep the image in css but remove it in the HTML it disappears. I want both images to be side by side and the same height. So yes I want the wood image to take up 5 columns and the grey image to take up 7 but both to be the same height

3 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

:point_right: The gap is due to padding added by bootstrap.

One way to remove it would be to give the columns an extra class, and define that class to remove the padding:

      <!--wood panel div -->
      <div class="col-md-5 no-gap">  <!  <-- added class "no-gap" ->
<! ... ->
      <!-- grey info div -->
      <div class="col-md-7 no-gap">  <!  <-- added class "no-gap" ->

.container-fluid .row .no-gap:first-child { padding-right: 0; }
.container-fluid .row .no-gap:last-child { padding-left: 0; }

The height issue is due to bootstrap using float to create columns

For this one, you may have to place both images in the same bootstrap column, which means you'll have to write your own media queries to make them appear over each other in smaller resolution screens. But the upside is then you won't need the above fix for the gap.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You didn't specify what the purpose of the images were but that would determine whether they belong in the html or the css. If you apply a background image to an element with no content then you won't see the image because the element will have zero height. That could have been why you weren't seeing the images when they were in the css.

If you keep them in the html then you should remove them from the css.

Assuming these images should be in the html, here's one way you could approach it. I think probably the easiest way to do this is to resize and/or crop your images appropriately in some type of image editing application.

The images need to be in the right proportions for this to work out if I'm understanding the problem.

Given that the right image occupies 7 out of 12 columns and the left image is 5 out of 12 means that the right image needs to be 1.4 times the width of the left image. 7 / 5 = 1.4

And the heights need to match.

So for example, let's suppose that the wood image is 500px by 500px. That means the width of the texture image needs to be 500px * 1.4 which is 700px and the height needs to be 500px to match the height of the wood image.

So 500px by 500px for the wood image and 700px by 500px for the texture is one example. You'll likely want to go bigger than this so that the browser isn't scaling up the images at wider widths.

You can make the heights taller if you'd like them to be taller than they are wide.

Here's a simplified codepen demo showing what I mean: http://codepen.io/anon/pen/BQYQOL Try resizing the preview window and see if that's doing what you want.

Let me know if you have any questions about this.

catherine paris
catherine paris
2,705 Points
catherine paris
catherine paris
2,705 Points

Thank you removing the padding and adding height to the media queries worked perfectly and it's also responsive!

Here's a link to the code in case someone else is having the same problem: https://codepen.io/blkgurlcode/pen/qqVebV/

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Setting a fixed height on your images and letting the width be fluid will distort them. They will scale differently in the horizontal and vertical direction. It's going to look stretched in one direction. This will be more noticeable with certain types of images. Your visitors are going to see different amounts of stretching depending on their screen width.

As an example, your wood image has a native size of 1280x1032 making it pretty close to a square.

When I resize the codepen preview window to a width of 1050px, the wood image is 443x810. Making it almost twice as tall as it is wide. It's no longer close to a square and you can see that it's being stretched in the vertical direction.