Bootstrap form margin not correct at smaller screens

Question

I have this form in the middle:

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):

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

Answer 1

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.

Answer 2

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;
   }
}