Responsiveness of website in different resolutions using Bootstrap

Question

I have developed a website. The responsiveness working fine in desktop view, but it is not working fine with different resolutions.

Here is my code:

<div class="container">

    <section id="ServicesSection">

                <div>
                    <br />
                    <br />
                    <br />
                </div>

                <div class="row">

                    <div class="col-sm-1"></div>

                    <div class="col-sm-10">
                        <div style="background-color: #3487C2; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">

                            <div style="text-align: center; vertical-align: top; color: #ffffff; text-transform: uppercase; font-size: 36px; font-weight: 500; padding: 10px 0px 10px 0px;">
                                <span class="services">Our Services</span>
                            </div>

                            <div class="container-fluid" style="padding-top: 5px;">

                                <div class="row" style="margin-bottom: 100px;">
                                    <div class="col-sm-1"></div>
                                    <div class="col-sm-10">

                                        <div style="text-align: center;" class="row">
                                            <div class="col-sm-1"></div>
                                            <div style="margin: 5px 5px;" class="col-sm-5 left animated fadeInLeft wow">
                                                <a href="HealthSummary.aspx" class="ServiceClick" id="HealthSummary">
                                                    <div   style="background-color: #ffffff ;padding:25px;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
                                                        <h1 style="color: #3487C2; font-size: 16px; font-weight: bold; text-align: center; font-weight: bold;">Wellness score or Health summary</h1>
                                                        <span style="color: #3487C2; text-align: center; font-weight: bold;">I'm a paragraph. Click here to add your own text and edit me. It's easy
                                                        </span>
                                                    </div>
                                                </a>
                                            </div>
                                            <div    style="margin: 5px 5px;" class="col-sm-5 right animated fadeInRight wow">
                                                <a href="HistoricalRecords.aspx" class="ServiceClick" id="HistoricalRecords">
                                                    <div  style="background-color: #ffffff;padding:25px;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
                                                        <h1 style="color: #3487C2; font-size: 16px; font-weight: bold; text-align: center; font-weight: bold;">Historical records storing</h1>
                                                        <span style="color: #3487C2; text-align: center; font-weight: bold;">I'm a paragraph. Click here to add your own text and edit me. It's easy
                                                        </span>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="visible-sm clearfix"></div>


                                            <div class="col-sm-1"></div>
                                        </div>

                                        <div style="text-align: center;" class="row">
                                            <div class="col-sm-1"></div>
                                            <div style="margin: 5px 5px;" class="col-sm-5 left animated fadeInLeft wow">
                                                <a href="ExpertOpinon.aspx" class="ServiceClick" id="ExpertOpinon">
                                                    <div style="background-color: #ffffff;padding:25px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
                                                        <h1 style="color: #3487C2; font-size: 16px; font-weight: bold; text-align: center; font-weight: bold;">Sharing the data or expert opinion
                                                            <br />
                                                            (Doctors, Family members, etc..)</h1>
                                                        <span style="color: #3487C2; text-align: center; font-weight: bold;">I'm a paragraph. Click here to add your own text and edit me. It's easy
                                                        </span>
                                                    </div>
                                                </a>
                                            </div>
                                            <div style="margin: 5px 5px;" class="col-sm-5 right animated fadeInRight wow">
                                                <a href="EmergencyContact.aspx" class="ServiceClick" id="EmergencyContact">
                                                    <div   style="background-color: #ffffff;padding:25px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
                                                        <h1 style="color: #3487C2; font-size: 16px; font-weight: bold; text-align: center; font-weight: bold;">Emergency contact info</h1>
                                                        <span style="color: #3487C2; text-align: center; font-weight: bold;">I'm a paragraph. Click here to add your own text and edit me. It's easy
                                                        </span>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-sm-1"></div>
                                        </div>

                                        <div style="text-align: center;" class="row">
                                            <div class="col-sm-1"></div>
                                            <div style="margin: 5px 5px;" class="col-sm-5 left animated fadeInLeft wow">
                                                <a href="Security.aspx" class="ServiceClick" id="Security">
                                                    <div  style="background-color: #ffffff;padding:25px;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
                                                        <h1 style="color: #3487C2; font-size: 16px; font-weight: bold; text-align: center; font-weight: bold;">Security</h1>
                                                        <span style="color: #3487C2; text-align: center; font-weight: bold;">I'm a paragraph. Click here to add your own text and edit me. It's easy
                                                        </span>
                                                    </div>
                                                </a>
                                            </div>
                                            <div style="margin: 5px 5px;" class="col-sm-5 right animated fadeInRight wow">
                                                <a href="Recommendations.aspx" class="ServiceClick" id="Recommendations">
                                                    <div  style="background-color: #ffffff;padding:25px;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
                                                        <h1 style="color: #3487C2; font-size: 16px; font-weight: bold; text-align: center; font-weight: bold;">Recommendations</h1>
                                                        <span style="color: #3487C2; text-align: center; font-weight: bold;">I'm a paragraph. Click here to add your own text and edit me. It's easy
                                                        </span>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-sm-1"></div>
                                        </div>
                                    </div>
                                    <div class="col-sm-1"></div>
                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="col-sm-1"></div>

                </div>

            </section>
        </div>

Here is myplunker https://plnkr.co/edit/1WNj7bl5fqCYu30UKYlf?p=preview

I am unable to get the all boxes with same height in different resolutions. My requirement is getting the all boxes with same height in different resolutions in all browsers.

Are you seriously using all that inline css? You're in for a world of pain keeping that up - you have padding and margin all over the place - I'd start again personally with just the basic bootstrap classes — StudioTime, Sep 30 '16 at 16:50
Add some fixed height for the box. For example add `
` to each boxes and say `height:250px`. In your code why the diff height occurs is because of the diff content sizes :) happy coding — Saravanan Kasi, Sep 30 '16 at 16:51
hi, @DarrenSweeney, i am new to the beginner and i know the basics of bootstrap,please help me to complete my task. — gopal, Sep 30 '16 at 16:53
Why don't you try this as Bootstrap has given this built in functionality for equal heights : http://getbootstrap.com.vn/examples/equal-height-columns/ — ARJUN, Sep 30 '16 at 17:06
@gopal - there are plenty of clear equal height solutions in the dup question. Clean-up your code and try those before posting on SO. — Carol Skelly, Sep 30 '16 at 18:19

score 0 · Answer 1 · answered Sep 30 '16 at 17:06

0

You need this div with same height. its possible by adding

max-height: ##px;
overflow:auto;

The div will have same height and according to content scroll will appear.

you can adjust the height using media query.

answered Sep 30 '16 at 17:06

Aswin KV

1,710
2
12
23

Responsiveness of website in different resolutions using Bootstrap

1 Answers1