Center elements and make them responsive

Center elements and make them responsive
0
#4

@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 :slight_smile:

#5

@bensrd

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!

:sunglasses:

Keep at it!

-WWC

#6

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
#7

See I knew we get some guidance!
Grid it is . . . . Forgot about that one for a minute.
Thank you @LisaWillCode
:sunglasses:
-WWC

#8

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
#9

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.

#10

@Dan_Cio thank you very much for your help ! This also enabled me to clarify what block-level and inline elements actually are hehe

#11

@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?

#12

@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.

#13

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

#14

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

#15

@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?

#17

Do you mean the Facebook, Instagram, buttons? They cover the whole width, so are centered. Do you want to make them smaller?

#18

@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. :slight_smile:

#19

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.

#20

@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 :smiley:

Isn’t text-align linked to horizontal centering rather than vertical?

#21

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?

#22

@Dan_Cio thank you for your patience, I mean the middle of the viewport, exactly :slight_smile: so that my buttons fill the page and it looks less empty

#23

No problem, glad to help. But if you keep them in the middle of the viewport (you do that with position:fixed), you’re going to get these buttons covering the rest of the content when you scroll). I am sure I am not understanding your intentions.

#24

@Dan_Cio so what I am seeking to do is this: I want my four buttons to span the width of the viewport, but also the height of the viewport so that they cover the ‘contact’ section and make this part look less empty. I created four columns for each button to fit in. Is it clearer now? ^^

Maybe I am using the term ‘viewport’ incorrectly?