responsive website layouts

Question

please see this page: serenitygardenrooms.com/canopy

I am trying to achieve the following:

The div containing the drop down menus to remain exactly the same size as the black box surrounding the image.

I want to make the menus closer together but the only way I can see is to remove padding and space the form bigger. Ideally this would look like 1 large section but actually remain as 2 for resizing to smaller devices where it will stack.

Here is what I have:

    <section id="canopy" class="maincolorbg">
    <div class="container">
    <div class="starter-template">
        <h1>Step 1</h1>

        <div class="smallsep">
        </div>
        <p class="lead">
            Please select your garden room design
        </p>
    </div>
    <div class="row">
    <div class="col-md-6 col-md-offset-1 range-item nopadding">
        <section class="flexslider fullbg wow bounceIn animated" id="spritespin" 
    data-wow-delay="0.3s"
                 data-wow-duration="2s"
                 style="padding: 0px;display: none" name="spritespin">
            <div id="spritespin"></div>
        </section>
        <section class="flexslider fullbg wow bounceIn animated" id="canopy- 
    slider" data-wow-delay="0.3s"
                 data-wow-duration="2s"
                 style="padding: 0px;" name="canopy-slider">
            <ul class="slides">

            </ul>
        </section>
    </div>
    <div class="col-md-6 range-item nopadding">
        <div class="thumbnail wow bounceIn animated" data-wow-delay="0.3s" data- 
    wow-duration="2s">
            <div class="caption" style="padding:10px 20px 12px;line- 
    height:60px;">
                <div><h2></br>The Canopy</h2></div>

                <p>
                    Please select your size:
                </p>

                <div class="wrapper-select">
                    <div class="triangle-select">
                    </div>
                    <select id="size" class="selectric">
                        <option value="">Select</option>
                        <option value="">All</option>
                        <option value="8*8">8' x 8'</option>
                        <option value="12*8">12' x 8'</option>
                        <option value="16*12">16' x 12'</option>
                        <option value="20*12">20' x 12'</option>
                        <option value="24*12">24' x 12'</option>
                    </select>
                </div>
                <p>
                    Please select your cladding style:
                </p>

                <div class="wrapper-select">
                    <div class="triangle-select">

                    </div>
                    <select id="claddingStyle" class="selectric">
                        <option value="">Select</option>
                        <option value="">All</option>
                        <option value="gap">Shadow Gap</option>
                        <option value="tongue">Tongue and Groove</option>
                    </select>
                </div>
                <p>
                    Please select your cladding direction:
                </p>

                <div class="wrapper-select">
                    <div class="triangle-select">

                    </div>
                    <select id="claddingDirection" class="selectric">
                        <option value="">Select</option>
                        <option value="">All</option>
                        <option value="horizontal">Horizontal</option>
                        <option value="vertical">Vertical</option>
                    </select>
                </div>
                <p>
                    Please select your door style:
                </p>

                <div class="wrapper-select">
                    <div class="triangle-select">

                    </div>
                    <select id="doorStyle" class="selectric">
                        <option value="">Select</option>
                        <option value="">All</option>
                        <option value="standard">Standard</option>
                        <option value="corner">Corner Style</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    </div>

Answer 1

You should use the bootstrap form-control class to achieve drop-down menu.

Answer 2

You can set the same height of both .range-item div in that row you can follow Bootstrap equal-height columns experiment

or you can wrap that row in one div and set the background colour of that div to #000 so the user can not see the difference in height of both div like below:

.wrapper {
  background: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<section id="canopy" class="maincolorbg">
<div class="container">
<div class="starter-template">
    <h1>Step 1</h1>

    <div class="smallsep">
    </div>
    <p class="lead">
        Please select your garden room design
    </p>
</div>
<div class="wrapper">
    <div class="row">
        <div class="col-md-6 col-md-offset-1 range-item nopadding">
            <section class="flexslider fullbg wow bounceIn animated" id="spritespin" 
        data-wow-delay="0.3s"
                     data-wow-duration="2s"
                     style="padding: 0px;display: none" name="spritespin">
                <div id="spritespin"></div>
            </section>
            <section class="flexslider fullbg wow bounceIn animated" id="canopy- 
        slider" data-wow-delay="0.3s"
                     data-wow-duration="2s"
                     style="padding: 0px;" name="canopy-slider">
                <ul class="slides">

                </ul>
            </section>
        </div>
        <div class="col-md-6 range-item nopadding">
            <div class="thumbnail wow bounceIn animated" data-wow-delay="0.3s" data- 
        wow-duration="2s">
                <div class="caption" style="padding:10px 20px 12px;line- 
        height:60px;">
                    <div><h2></br>The Canopy</h2></div>

                    <p>
                        Please select your size:
                    </p>

                    <div class="wrapper-select">
                        <div class="triangle-select">
                        </div>
                        <select id="size" class="selectric">
                            <option value="">Select</option>
                            <option value="">All</option>
                            <option value="8*8">8' x 8'</option>
                            <option value="12*8">12' x 8'</option>
                            <option value="16*12">16' x 12'</option>
                            <option value="20*12">20' x 12'</option>
                            <option value="24*12">24' x 12'</option>
                        </select>
                    </div>
                    <p>
                        Please select your cladding style:
                    </p>

                    <div class="wrapper-select">
                        <div class="triangle-select">

                        </div>
                        <select id="claddingStyle" class="selectric">
                            <option value="">Select</option>
                            <option value="">All</option>
                            <option value="gap">Shadow Gap</option>
                            <option value="tongue">Tongue and Groove</option>
                        </select>
                    </div>
                    <p>
                        Please select your cladding direction:
                    </p>

                    <div class="wrapper-select">
                        <div class="triangle-select">

                        </div>
                        <select id="claddingDirection" class="selectric">
                            <option value="">Select</option>
                            <option value="">All</option>
                            <option value="horizontal">Horizontal</option>
                            <option value="vertical">Vertical</option>
                        </select>
                    </div>
                    <p>
                        Please select your door style:
                    </p>

                    <div class="wrapper-select">
                        <div class="triangle-select">

                        </div>
                        <select id="doorStyle" class="selectric">
                            <option value="">Select</option>
                            <option value="">All</option>
                            <option value="standard">Standard</option>
                            <option value="corner">Corner Style</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 3

Better to make center like this on mobile screen.

Add this css on inside media queries

@media only screen and (max-width: 767px) {
    .nav.navbar-nav {
        text-align: center;
        float: none !important;
    }
}