SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    795
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    media query not kicking in for all elements.

    I have a logo on my main page. use this code to resize at a smaller screen size.

    Code:
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {
    /* Styles */
     	#mainBody{
    	background:#ff0000;
    	}
    	
      #logo img{
    	padding-left: 20px;
    	margin-top: -110px; 
      width:50%;
      height:50%;
    	}
    }
    the bdoy color chnage goes into effect the image resize doesn't I also tried

    Code:
      #logo{
    padding-left: 20px;
    margin-top: -110px; 
    width:50%;
     height:50%;
    	}
    how could I kick this change in please?
    thx
    D

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    What's your HTML? Is the ID on the image itself or its container?

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    795
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    the id is on the div itself, but that is why I also tried

    #logo>img{style:whatever;}
    and #log img{style:whatever;}

    either way it didn't work. but the body styling does.
    thx
    d

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    We really need to see the full code to know what's going wrong. Check out this page (posts 2 and 9) for a guide on how to post your code with images included:

    http://www.sitepoint.com/forums/show...Posting-Basics

  5. #5
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    795
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I understand i just thought this would be an easy one. will see about putting the code up tomorrow at the latest.
    Thank you ralph

  6. #6
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    795
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    you know....will have the page up by tomorrow.
    I got it to work but, I remain a bit confused.

    Code:
    #logo img{
    padding-left:5px;
    margin-top: -5px; 
    width:50%px;
    height:50%px;
    }
    i have changed the sizes of divs just using the
    %
    . I guess you have to use
    %px
    for images?
    thx
    D

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    I guess you have to use %px for images?
    No, that's just invalid CSS, which will just mean that those styles are ignored.

  8. #8
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    795
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hello Ralph, gm.
    I would have thought so as well. but it worked.
    http://thebigmeow.us/
    the logo does get smaller if I add the px at the end of the %.
    pretty sure I am am not imagining it.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    Hello Ralph, gm.
    I would have thought so as well. but it worked.
    http://thebigmeow.us/
    the logo does get smaller if I add the px at the end of the %.
    pretty sure I am am not imagining it.
    style.css (line 31) says:
    Code:
    img {
        height: auto;
        max-width: 100%;
    }
    The images are resizing because their container is being resized and they are resizing to fit their container.

    Your invalid styles are simply being ignored, thereby allowing the above code to take effect.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    As Ron says, those invalid styles are being ignored. On a side note, you still haven't taken our many tips to optimize your background images. Each site you show us has large background images that are far too slow to load. You really need to deal with that, as it's a terrible thing to do to users—especially on mobile. It's really easy to save the images for the web in Photoshop.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •