title: Bootstrap 3 breakpoints doesnt work for mobile screens
body: <pre><code>     &lt;!-- Product Popup View Start--&gt;
          &lt;div class=&quot;modal fade appointment_view&quot; id=&quot;appointment_view&quot;&gt;
              &lt;div class=&quot;modal-dialog&quot; style=&quot; padding: 110px;
              /* Extra Small Devices, Phones */
  @media only screen and (min-width : 480px) {
  padding: 55px!important;
  } &quot;&gt;
         
  </code></pre>
  <p>I wrote this code for bootstrap 3 modal but 55px property doesnt be read by mobile screen.on mobile screen, works 110px padding property, in other words.</p>
  <p>how can I change phone screen padding property inline or with class?</p>
  <p>its bootstrap modal.I am write below information for if you want to check the website.</p>
  <p>the website is this : <a href="https://resimli.yedek.deniz-tasarim.site/" rel="nofollow noreferrer">https://resimli.yedek.deniz-tasarim.site/</a></p>
  <p>on homepage, below slider, there are 3 green information box.click the appointment now button.then, a modal will be opened.the modal has the padding issue.</p>
  <p>the modal has close button at top-right corner.the button must be seemed for every screen.</p>
  <p>also the modal must be had padding because mobile user can click the padding space areas to return homepage screen.</p>
  <p>so, my issue is this.I hope you understand me and you will find a good solution.</p>
  <p>thanks.</p>