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
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 {
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.
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:
section{
width:100%;
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
}
#contact{
position: relative; ///Set up #contact as the relative parent for .no-gutter
}
.no-gutter{
width: 25%;
height: calc(100vh - 110px);
top: 110px;
position: absolute;
}
.no-gutter:nth-child(1){
left: 0;
}
.no-gutter:nth-child(2){
left: 25%;
}
.no-gutter:nth-child(3){
left: 50%;
}
.no-gutter:nth-child(4){
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.