CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
John_Nil
John_Nil

Reputation: 135

Several Small Issues with Bootstrap 3 (CSS)

I'm creating a website as a project and using bootstrap 3 - i'm having a few issues with some parts :

Site in Large window : http://2.ii.gl/9qDvim.png

Site in small window : http://1.ii.gl/VA7OgN.png

1) Background image : When i make the window smaller , the images resizes to a certain point then stops . In mobile - there is a large overflow hidden . Is there any way to resize it according to the window size ?

my current css code :

#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -50px;
  /* Pad bottom by footer height */
  padding: 0 0 50px;
  background:url("/images/bgg5.jpg") no-repeat;
  background-size: cover;
}

2) The input fields - It is resizing too much in small browser - Is there a way to prevent it from resizing unless the window width is smaller than the length of the input field ?

This is how it looks like in mobile : http://4.ii.gl/9oQ7Hp.png

My code for 1 input field :

<div class="form-group">

                <label for="inputID">Input</label>

                <div class="row">

                    <div class="col-xs-4">

                        <div class="input-group">

                            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>

                            <input type="text" class="form-control" placeholder="Enter Input" name="login">

                        </div>

                    </div>

                </div>

            </div>

Upvotes: 1

Views: 253

Answers (1)

Mark Ni
Mark Ni

Reputation: 2401

  1. No, your image doesn't have enough height to resize any further, background-size:cover means it has to cover the whole screen without losing proportion. Try set a custom background position css for mobile only, so the background can show the right part you want.

  2. Your div's width has a class col-xs-4, which makes take 33% of the width in any screen larger or equal to x-small. To show it in full width in phone, you can try change it to col-xs-12 col-sm-4.

Upvotes: 1

Related Questions