Hi guys, I have been working on my portfolio and feel like I’m quite getting to the end of the first draft ! I am still having trouble centering elements though and images are not responsive despite adding the img-responsive class when needed. Same with resizing images, I have had to find images that have similar sizes because I couldn’t scale them all to the same thumbnail size for some reason… Can you help me on that please? https://codepen.io/bensrd/pen/wrZrRo?editors=1100
It is tough to know it all out of the gate, I am not sure responsive design and image sizing is included at the beginner map, I would figure these to be intermediate. I am still learning but to do it without boot strap it is beginning to spend a lot of time in CSS using % instead of a px size and media queries (Fluid, Adaptive, and Responsive Design).
In the end you might wind up setting your own or commonly used view port breakpoints to go from desktop, to tablet, to mobile.
Scalable images with viewport size:
*MEDIA: img, embed, object , video
*No IE6 Support
2 Steps
1 - save larger size than we need
2 - use max-width for scaling
Is this what you are talking about or how to deal with the photos only?
Here is a quick and dirty way to do it without delving deeper Option #1.
Let’s say three images are being used and you want them left to right.
Put them in a list in your HTML at the right spot on your page code:
<ul class = "ben_photos">
<li><img .......
</ul>
In your CSS:
<!-- This will remove bullets and padding from your list of photos -->
.ben_photos {
list-style-type: none;
padding: 0px;
}
<!-- This will display them in line with each other and give them a little padding from each other -->
.ben_photos li {
display: inline;
padding: 0 5px 0 5px;
}
Option #2.
Or you can get a little different and more involved with floats and overflow.
You can use CSS property float and class selectors on the images like this:
.photo1 {
float: left
}
.photo2 {
float: left
}
.photo3 {
float: left
}
If you put those classes into each img element as you go and they will go left to right in the order you declare them
and will drop down to the next available space if view port is changed. might want to read a little about clearing floats if you go this route.
If you use the overflow property you can hide what is beyond the container for the object, or add scroll, or let it auto, or let it be visible even if larger.
<!-- overflow: visible or auto or hidden or scroll -->
so you can crop your images to the same size containers:
.crop_photo {
height: 300px;
width: 400px;
overflow: hidden:
}
That will make the images all the same size. If you don’t resize them before hand they will be clipped that way.
might also want to add padding-right: 10px if you don’t want them touching?
you can use auto for one of those parameters for some scaling.
you can use block to more easily center items if you want if one img per line.
Check out this link:
http://clagnut.com/sandbox/imagetest
Option #3:
Eventually you are going to wind up potentially going responsive with media queries and likely some javascript mixed in.
I don’t know much, but I am trying to figure it out.
-WWC
@Wookies-Will-Code Thank you so much, I hadn’t seen the rest of your response at first. I’ll play with that, this is really helpful 
Ben you are all good, we are all here learning together. Someone more talented than I will likely chime in and let you know how to do it correctly beyond my (also rookie) methods.
And that is a good thing. In this manner we can all learn.
But when you want to stack or display images up and down or left to right, there are several ways to do it, depending on your skill and preference.
You have to go with what you know or can find out, but you will expand and certainly grow your repertoire!
Keep at it!
-WWC
Having just finished the personal portfolio myself, I can say that the instructions do say to use responsive design. I had problems, too, thinking that “img-responsive” was supposed to take care of the resizing. I posted here as well.
It turns out you need to use the 12-column grid classes, so wrap each image in its own set of div tags and add the classes col-md-3 or col-sm-6 to them (using the column spans you need for your images).
<div class="col-md-3 col-sm-6"><img src="myImg.png" class="img-responsive" /></div>
And you probably know that all of your body code needs to be inside a div with class=“container” or class=“container-fluid”.
1 Like
See I knew we get some guidance!
Grid it is . . . . Forgot about that one for a minute.
Thank you @LisaWillCode
-WWC
Glad it helped. But if we have to put in the column classes, I don’t see what the img-responsive class does.
1 Like
I strongly recommend this article from CSS Tricks. I think you mean center horizontally, which if you’re referring to block-type elements, can be done with margin:0 auto. If you’re not trying to center block-level elements, you can use text-align:center;
Avoid Bootstrap and other JS stuff for simple tasks like these.
@Dan_Cio thank you very much for your help ! This also enabled me to clarify what block-level and inline elements actually are hehe
@LisaWillCode I did wrap the first bobcat image in its own column div but below a specific screen size the picture just covers the following section and overflow: hidden just doesn’t work. Have you had this issue too?
@bensrd, I’m still struggling with this stuff myself, but I believe the answer is to specify a smaller width and height for the picture right in the HTML img tag. Or you could do that in a media query in CSS so that it’s only smaller as the xs screen size… Not sure how you’d do it with Bootstrap.
There is also a “service” or helper based on responsive images.
https://responsive.io/
As we get deeper in to learning there are ways to handle the sizing and conformity issues.
But you do see to handle this “server side”, Ie. make multiple images in multiple sizes to call up on query.
-WWC
Boostrap doc from one site says the image will scale with the parent element, using img-responsive, so that is what you have to pay attention to, the parent element.
https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
-WWC
@Dan_Cio I have been using the CSS tricks page but cannot manage to center buttons in the middle of the page in the last section (contacts). Do you have any clue what I am missing?
Do you mean the Facebook, Instagram, buttons? They cover the whole width, so are centered. Do you want to make them smaller?
@Dan_Cio I was thinking about either centering them vertically (middle of the page) or having them cover the whole page and automatically adapt when making the screen smaller.
Give the row div a text-align:center property and each child (button, in your case) a display:inline-block property. If you want buttons responsive, give them a width in percentages. An example:
<div style="text-align:center;">
<div style="display:inline-block;width:30%;height:25px;background-color:red;">Button 1</div>
<div style="display:inline-block;width:30%;height:25px;background-color:blue;">Button2</div>
</div>
If you want them arranged in a vertical row, just give the buttons margin:(whatever you want) auto as margin.
@Dan_Cio it seems that this won’t work… I cannot see what I’m doing wrong here and I have been struggling with this vertical centering thing for a week now, it’s driving me mad 
Isn’t text-align linked to horizontal centering rather than vertical?
Yes, it does. I am not sure what you mean my vertical centering of elements on a page (the middle of the viewport, of the document?). Do you mean centering the text inside the buttons?
@Dan_Cio thank you for your patience, I mean the middle of the viewport, exactly so that my buttons fill the page and it looks less empty