This forum is now read-only. Please use our new forums at discuss.codecademy.com.

Make a Website: Bootstrap Forum

View Course » View Exercise

592 points
0065e95370179551753488def6836bc9?s=140&d=retro
Submitted by
davidjacob93
over 2 years ago

Image size help ?

I am doing neighborhood-guides now and I am placing my own pictures in on it. But all the picture i put in is of different size. The pictures I am trying to put in are from google images all different sizes. I want my images to be size like in 9/14 when u go down and the pics with mexico city, tokyo etc etc. I tried to go to CSS and try changing to .neighborhood-guide container row col-md-4 thumbnail { height:360; width:165;} but did not work. Thanks


0 votes

permalink

Hi David,

If you check in the bootstrap.css file that we are using, you will find this:

.neighborhood-guides .thumbnail {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

This should be forcing the thumbnails to be 360px wide. If the images that you are trying to use aren't proportioned the same as the ones in the project then forcing a height on them as well is probably not going to help.

3698 points
55df2afa95e3787b9200005e_359368177
Submitted by
Judy
over 2 years ago

10 Comments

92b66a18deb639030717bd6eb012255b?s=140&d=retro Armant over 2 years ago

How many px should the image height and length be then to work properly, AR?

55df2afa95e3787b9200005e_359368177 Judy over 2 years ago

If you right click on any of the images and inspect element, then you should be able to see their size. Looking at the Toyko img shows 352x161. Any image with about the same proportions should look reasonable. So using an image that was 700x320 should look fine but using something like 350x350 will not.

92b66a18deb639030717bd6eb012255b?s=140&d=retro Armant over 2 years ago

soo lets see if i get you...if all the images use the same length/height ratio they will auto adjuste to display the same size. if not the same ratio thy won't.

are we on the same page?

55df2afa95e3787b9200005e_359368177 Judy over 2 years ago

Yes I think we are. You should do a bit of testing to confirm.

92b66a18deb639030717bd6eb012255b?s=140&d=retro Armant over 2 years ago

did it, but it didn't work.
changed all the images to 300x300px but they still all over the place and not following the bootstrap grid, some auto size others don't. I've all so noticed that if i put an h5 header above the images it mess things up now i've taken it away, but don't understand why the h5 header effects the images...

92b66a18deb639030717bd6eb012255b?s=140&d=retro Armant over 2 years ago

found the problem my div's were out.

55df2afa95e3787b9200005e_359368177 Judy over 2 years ago

Yay!

92b66a18deb639030717bd6eb012255b?s=140&d=retro Armant over 2 years ago

Is there a way to make the alt tags of the images show when you hover over the image?

92b66a18deb639030717bd6eb012255b?s=140&d=retro Armant over 2 years ago

What do you think of the home page?


0 votes

permalink

Hi Armant,

  • I'm not sure about how your page looks because the images are broken links for me.
  • The class="img-responsive" belongs on the img elements.
  • Comments should be like this: <!-- your comment -->
  • I don't know why the alt info isn't showing,

3698 points
55df2afa95e3787b9200005e_359368177
Submitted by
Judy
over 2 years ago

6 Comments

92b66a18deb639030717bd6eb012255b?s=140&d=retro Armant over 2 years ago

  1. you can't see the img and i can ??? i did try sharing it to the public through google now, check again if it is still broken...
  2. not sure where you mean by img elements.
  3. fixed all comments

55df2afa95e3787b9200005e_359368177 Judy over 2 years ago

Here is how to use img-responsive: http://getbootstrap.com/css/#images-responsive - that shows that we should use . I still do not see the images, I get "Your client does not have permission to get URL"

92b66a18deb639030717bd6eb012255b?s=140&d=retro Armant over 2 years ago

Albions, i've got the code more or less down now but i've hit a brickwall now on hosting my first page. my host says that there is some sort process with loading the info on their server, such as the home page's name needs to be index.html . the hosting part of the webpage isn't part of this course so i'm a bit lost. is this the norm with a hosting company?

92b66a18deb639030717bd6eb012255b?s=140&d=retro Armant over 2 years ago

figuared it out.
see if you can see the images now?
www.queensburghandyman.co.za

55df2afa95e3787b9200005e_359368177 Judy over 2 years ago

I can see them now, it's shaping up nicely. I think that "peace" should be "piece".

92b66a18deb639030717bd6eb012255b?s=140&d=retro Armant over 2 years ago

oops, fixed it. Thanks. Any suggestions...