CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
IkePr
IkePr

Reputation: 930

Bootstrap form margin not correct at smaller screens

I have this form in the middle: enter image description here

I managed to put the form under the logo, in the middle, when I added a style attribute:

 <form class="form-horizontal" style="margin-left: 170px;">

But when I entered and saw the screen on a mobile (Iphone 6 Plus - Developer mode), the form was off, way to much to the right):

enter image description here

How do I put the style margin only for big screens ? Mobile and other smaller devices should not like picture 2.

Upvotes: 0

Views: 66

Answers (2)

Sunil Boricha
Sunil Boricha

Reputation: 456

First you need to remove inline style for HTML code and add class "mr170"

<form class="form-horizontal mr170">

"form-horizontal" is a bootstrap call so don't apply css/style on it. it's effect all over project.

Add blow code in css:

@media (min-width: 768px) {
   .mr170 {
      margin-left: 170px;
   }
}

Note: mr170 is just random class name whatever name you think use in HTML and CSS.

Upvotes: 3

Manish Patel
Manish Patel

Reputation: 3674

you can set media query for margin only for big screens (adjust the px when u need to add margin was added)

@media (min-width: 1025px) {
   .form-horizontal {
      margin-left: 170px;
   }
}

Upvotes: 1

Related Questions