3 Replies - 354 Views - Last Post: 01 February 2017 - 01:33 PM

#1 steveb63  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 03-April 15

@media not changing image size

Posted 01 February 2017 - 06:02 AM

I have a media query that if my web page is displayed at 320px width 480px height a smaller verison of an image is shown. However, this is not the case. The original image does not change.

The @media is:
@media (min-width: 320px) {
    .img-format {
    background-image: url('../images/fingerpointing.jpg');
    background-size: 11px;
    background-repeat: no-repeat;
    }
}



The html where the class .img-format is used is:
    <div class="container">
        <nav class="navbar navbar-inverse img-format">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
             </div>
            <!-- nav bar -->
         
               <h3 class="text-center">Helping you to take life one step at a time</h3>
          </div>
        </nav>
    </div>



Just in case you need to know I have the following in the <head> section:
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script type="text/javascript" src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
    <!-- fontawesome link -->
    <script src="https://use.fontawesome.com/7d21b59a55.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


Can anyone tell me why the image does not resize?

Thanks in advance.

Stephen

Is This A Good Question/Topic? 0
  • +

Replies To: @media not changing image size

#2 andrewsw  Icon User is online

  • say what now
  • member icon

Reputation: 6410
  • View blog
  • Posts: 25,916
  • Joined: 12-December 12

Re: @media not changing image size

Posted 01 February 2017 - 07:10 AM

Have you inspected the element in your browser's developer tools? What does the CSS pane indicate?
Was This Post Helpful? 0
  • +
  • -

#3 steveb63  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 03-April 15

Re: @media not changing image size

Posted 01 February 2017 - 11:56 AM

Hi, thanks for the advice but I discovered what went wrong. I corrected the error.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • say what now
  • member icon

Reputation: 6410
  • View blog
  • Posts: 25,916
  • Joined: 12-December 12

Re: @media not changing image size

Posted 01 February 2017 - 01:33 PM

Could you describe what the issue was, for anyone who comes across this thread?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1