Center elements and make them responsive

Center elements and make them responsive
0
#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?

#25

The viewport is the screen. When you are scrolling you are moving the viewport in the document. I am looking at your pen and the buttons are enormous. Why don’t you just reduce the height of the contacts section and then use inline-block or float to align them.

#26

@Dan_Cio isn’t it possible to just do that with the section size that we have now? It’s a style I want to give to my page to be honest

#27

Sure. Which of the two options best fits:

or this

?

#28

option 1 is what I am trying to obtain!

#29

One option is to use float.
advantages: it does not create spaces between elements
disadvantage: elements after the floated buttons will be floated, too, which means you will have to use a clearfix. If this is the last line of your file, then you can use it.
The other is to use inline-block.
advantages: no need for clearfix
disadvantage: spaces between divs.

So, using the latter option:

body>div>div {
    width:30%;
    box-sizing:border-box;
    display:inline-block;
    height:50px;
    background-color:red;
    padding-top:18px;
}
<div style="text-align:center;">
	<div>Div 1</div>
	<div>Div 2</div>
	<div>Div 3</div>
</div>

Notice that I cannot give it 33.3% width because of the spaces between divs. If I were to make width:33.3%, Div3 would drop on the next row. So the html code needs reformatting like this:

<div style="text-align:center;">
	<div>Div 1</div><div>
       Div 2</div><div>
       Div 3</div>
</div>

With spaces eliminated, I can change the width of the divs to 33.3% and they will remain on the same line.

Let me know if there is something here that is unclear. Paste this code in here and play with it.

#30

Of all the stuff mentioned, many harder code pieces have been laid out, but no one has brought up flexbox. Flexbox is a newer layout tool that makes centering horizontal/vertically and creating layouts really easy, especially when combined with Bootstrap grid.

Flexbox would really simplify both centering vertically and horizontally, and you wouldn’t have to deal will all the disadvantages of floats.