Declaring Height of an Article

Question

I am working on creating my Portfolio Website gw.mvctc.com/Class2018/smcintosh I recently converted it partly to bootstrap, and it looks ok, but as you can see, on the home page, there is a horizontal scroll to nothing, and the boxes are not the same height. I have figured out that the horiz. scroll is the same width as the vertical scroll bar, so I'm not sure if that is part of the issue, or not.

How can I fix the horizontal scroll issue and how do I make the boxes the same height?

At the moment i have this style code on my article, the object that has the box:

article {
    padding: 10px;
    border: #ff4100 solid 7.5px;
    border-radius: 15px;
}

and this is the HTML for the article itself:

<div class="fluid-container">
    <div class="row">
        <section class="col-lg-4 col-md-6 col-sm-6">
            <article>
                <h2>Education Goals</h2>
                <ul>
                    <li>At the moment my largest education goal is to graduate
                        from high school</li>
                    <li>I hope to have enough scholarships to be able to go to a
                        good college to further my education and gain more knowledge</li>
                    <li>I hope to graduate from a good college with a bachelor's
                        degree in some form of computer science</li>
                </ul>
            </article>
        </section>
        //More sections follow, hence the 2 other boxes
        //...
    </div>
</div>

Please add a [mcve] for faster troubleshooting. Also, read our [ask] page for other guidelines when asking in StackOverflow - Welcome! — blurfus, Mar 31 '17 at 23:40

score 1 · Accepted Answer · edited May 23 '17 at 10:30

1

The issue with the horizontal scrollbar is that you are applying a fluid-container class, when it should be container-fluid.

For the height you could use a plugin like matchHeight or override the bootstrap CSS and make it use flexbox (see How can I make Bootstrap columns all the same height?).

(btw, bootstrap 4 uses flexbox)

edited May 23 '17 at 10:30

Community

1
1

answered Mar 31 '17 at 23:57

Gabriele Petrioli

191,379
34
261
317

repzero · Answer 2 · 2017-04-01T00:19:08.200

1

The div with the class row has margin-right property set to -15px. The navbar also has margins set. Specifically though, the div is overflowing the body. Add an id tag to the div named boxcontent and style as follows:

nav,#boxcontent{
margin-left:0; /*optional but adding this makes the nav full width!*/
margin-right:0;
}

Edit

pen is here

edited Apr 01 '17 at 00:19

answered Apr 01 '17 at 00:09

repzero

8,254
2
18
40

Declaring Height of an Article

2 Answers2