CODEWITHSUNDEEP
twitter-bootstrap
Shantnu
Shantnu

Reputation: 137

Top Margin while using BootStrap Give space when viewed in mobile

I New in designing . I m designing website using bootstrap. i have given margin top in div inside row. It gives correct view while using laptop but give space while using Mobile View.

Link : demo3.hexaperkservices.com

I have provided the link you can see yourself

    <div class="container">
        <div class="row TopRow">
            <div class="col-md-4 text-center TopOne">
                <img src="Style/Images/Logo/LOGO_80_61_PNG.png" alt="Aasaan Haina" />Aasaan Haina
            </div>
            <div class="col-md-4 text-center TopTwo">Browse Course</div>
            <div class="col-md-4 text-center TopThree">
                <asp:Button ID="btnLogin" runat="server" CssClass="btnLogIn" Text="Log In" />
                <asp:Button ID="btnSignUp" runat="server" CssClass="btnSignUp" Text="Sign Up" />
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 HeaderTop">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 text-center img-responsive HeaderMiddle">
                <div class="TextHeaderMiddle">Unlock access to the world's largest tech & creative training library</div>
                <div class="ButtontHeaderMiddle">
                    <asp:Button ID="btnSignUpNow" CssClass="btnSignUpNow" runat="server" Text="Sign Up Now" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
            </div>
        </div>
    </div>

//---CSS---//

@import url(https://fonts.googleapis.com/css?family=Poiret+One);
.TopRow{
margin:10px 0 10px 0;
}
.TopOne {
font-family: Poiret One;
font-size: xx-large;
}

.TopTwo {
font-family: Poiret One;
font-size: x-large;
margin-top: 10px;
}

.TopThree {
font-family: Poiret One;
font-size: 20px;
margin-top: 10px;
}

.btnLogIn {
border:none;
border-radius:6px;
min-height:40px;
width:150px;
font-weight:bolder;
background-color: rgb(255, 69, 69);
color: white;
}

.btnSignUp {
border:none;
border-radius:6px;
min-height:40px;
width:150px;
font-weight:bolder;
color: white;
background-color: rgb(212, 212, 212);
}

.HeaderTop {
background-color: rgb(230, 230, 230);
height: 2.4em;
}

.HeaderMiddle {
background-image: url(Images/mota.ru-20150824155-1920x1200.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
min-height: 29.6em;
}

.TextHeaderMiddle {
font-family: Poiret One;
font-size: 52px;
font-size-adjust: inherit;
color: white;
margin: 1.2em 20% 1.2em 20%;
width:60%;
}

.ButtontHeaderMiddle {
font-family: Poiret One;
font-size: 20px;
font-size-adjust: inherit;
color: white;
margin:0 auto;
width:60%;
}

.btnSignUpNow{
border:none;
border-radius:6px;
background-color:white;
color:rgb(76, 76, 76);
min-height:40px;
width:200px;
font-weight:bolder;
}

Upvotes: 0

Views: 46

Answers (1)

Aakash
Aakash

Reputation: 1791

The reason you are seeing space is because your text has margin assigned to it. What you can do is replace the following

.TextHeaderMiddle {
    font-family: Poiret One;
    font-size: 52px;
    font-size-adjust: inherit;
    color: white;
    margin: 1.2em 20% 1.2em 20%;
    width:60%;
}

with this...

.TextHeaderMiddle {
    font-family: Poiret One;
    font-size: 52px;
    font-size-adjust: inherit;
    color: white;
    padding: 1.2em 20% 1.2em 20%;
    width:100%;
}

Upvotes: 1

Related Questions