Center elements and make them responsive

Center elements and make them responsive

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

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.



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.



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


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>

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

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 :slight_smile: so that my buttons fill the page and it looks less empty


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.


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


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.


@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


Sure. Which of the two options best fits:

or this



option 1 is what I am trying to obtain!


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 {
<div style="text-align:center;">
	<div>Div 1</div>
	<div>Div 2</div>
	<div>Div 3</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>

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.


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.


@bensrd, you are also using the Bootstrap grid somewhat incorrectly and have some other code mistakes, that is part of the problem you are experiencing. Your portfolio is coming along really nicely, if you want, I can provide more explanation when you’re done with your “first draft” or so.


Flex-box was made for this but if you don’t want to dig into that yet, you can easily do this with position: absolute.

First, you’d have to remove the bootstrap column classes for no-gutter divs. Then wrap all of them in an empty div just so :nth-child is more intuitive.

Now the CSS:

  min-height: 100vh;
  height: auto; ///This is to stop your sections from collapsing on each other when
                        ///  their content goes beyond 100vh. e.g. smaller screens

  position: relative; ///Set up #contact as the relative parent for .no-gutter

  width: 25%;
  height: calc(100vh - 110px);
  top: 110px;
  position: absolute;

  left: 0;

  left: 25%;
  left: 50%;
  left: 75%;

That should change the divs to look as you described them, but I think it looks a little weird on smaller screens and you’d still have to account for font-sizing.