6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

Stuck on using media query....

by GowebMkt
5 replies
  • WEB DESIGN
    • |
Hey Warriors,

Im trying to add a media query to my site, but it wont work.

Once the site is viewed at less than 920px the web page background image should change.

Please see my source code here: https://www.schraderwebsolutions.com/woman-beach/

Thanks!

Bret
#media #query #stuck
  • Profile picture of the author savidge4
    I believe there is a few errors in your code. 2 specifically. the CSS statement below is not ended correctly, and the image file is not linked to correctly.

    Code:
    @media only screen and (max-width: 920px) {
            #image { 
                background-image: url(smallimage.jpg); // <-- this specifically
            } // <-- Needs a second end bracket
    CORRECTED

    Code:
    @media only screen and (max-width: 920px) {
            #image { 
                background-image: url(smallimage.jpg); // <-- this specifically
            } 
}
    The image URL should look something like this:

    Code:
    background-image: url('images/smallimage.jpg');







    Originally Posted by GowebMkt View Post

    Hey Warriors,

    Im trying to add a media query to my site, but it wont work.

    Once the site is viewed at less than 920px the web page background image should change.

    Please see my source code here: https://www.schraderwebsolutions.com/woman-beach/

    Thanks!

    Bret
    Signature
    Success is an ACT not an idea
    {{ DiscussionBoard.errors[10268425].message }}
    • Profile picture of the author webcosmo
      Make sure it's not overriden by another media query.
      Signature


      {{ DiscussionBoard.errors[10269015].message }}
      • Profile picture of the author GowebMkt
        OK...so here is my updated code....the image URL is pointing to an image that doesnt exist yet.....but it still should stop showing the orig image, right?



        @media only screen and (max-width: 920px) {
        #image {
        background-image: url('images/smallimage.jpg');
        }

        }

        </style>

        I used this code and it still shows the orig image when I scale the browser below 920px width.

        I dont see any other media queries on this page that could conflict with this.

        Any ideas?
        Signature
        {{ DiscussionBoard.errors[10269158].message }}
        • Profile picture of the author savidge4
          I have a site that I control for the most part how it "Breaks" and use the CSS below to control that.

          Code:
          @media only screen and (min-width:960px){
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width:1440px){
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width:2000px){
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width:480px){
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width:768px){
       /* default iPad screens */
    }
     @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For iPad portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }

          So you will want to ensure you are using a Max and a Min width command. I am guessing right now your theme by default is breaking at 768. So introducing the break at 920 would not alter anything, because the default will override because it is greater than 768. Make sense?
          Signature
          Success is an ACT not an idea
          {{ DiscussionBoard.errors[10270254].message }}
        • Profile picture of the author webcosmo
          You can try adding css background-position-x: 0px;? Would that solve your current issues?
          Signature


          {{ DiscussionBoard.errors[10270678].message }}

Trending Topics