SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make unordered lists responsive?

    I am trying to learn responsive design and I have managed to write the first couple media queries to scale the some of the divs, but I cant seem to get the media queries for the ul list in the services div that has the sprite icons to take affect. It just gets overided by the first full screen style. Am I missing something?
    http://www.satori-design.com/

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I only had a quick look (as you have a lot of css files in there) but check that your meria query styles are in the right order.

    It's no good defining the rules for a specific width and then have rules that floow that apply to all widths.

    e.g.
    Code:
    @media (max-width: 994px) {
    	#service ul { left: 20px !important; }
    	#service li {
    	display: inline;
    	width: 100%;
    	height: 100%;
    	float: left;
    	}
    	#service ul.services {
    	list-style-type:none;
    	position:absolute;
    	top: 350px;
    	width:960px;
    	}
    
    /* etc....*/
    }/* end of media query*/
    
    /*Services*/
    #service { height:300px; }
    #service ul {
    	top:8%;
    	left: 10px;
    	position: absolute;
    	max-width:1000px;
    	width:100%;
    }
    @media (max-width: 994px) {
    	#service ul { left: 20px !important; }
    	#service li {
    	display: inline;
    	width: 100%;
    	height: 100%;
    	float: left;
    	}
    	#service ul.services {
    	list-style-type:none;
    	position:absolute;
    	top: 350px;
    	width:960px;
    	}
    
    /* etc....*/
    }/* end of media query*/
    
    /*Services*/
    #service { height:300px; }
    #service ul {
    	top:8%;
    	left: 10px;
    	position: absolute;
    	max-width:1000px;
    	width:100%;
    }
    
    /* etc...*/
    #service li{
      height:202px;
          width: 200px;
        float:left; /* IMPORTANT */
        list-style-type: none;
        display:inline; /* IMPORTANT */
    }

    The rules that follow the media query will take precedence (assuming they have more weight of course).

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    I only had a quick look (as you have a lot of css files in there) but check that your meria query styles are in the right order.

    It's no good defining the rules for a specific width and then have rules that floow that apply to all widths.

    e.g.
    Code:
    @media (max-width: 994px) {
    	#service ul { left: 20px !important; }
    	#service li {
    	display: inline;
    	width: 100%;
    	height: 100%;
    	float: left;
    	}
    	#service ul.services {
    	list-style-type:none;
    	position:absolute;
    	top: 350px;
    	width:960px;
    	}
    
    /* etc....*/
    }/* end of media query*/
    
    /*Services*/
    #service { height:300px; }
    #service ul {
    	top:8%;
    	left: 10px;
    	position: absolute;
    	max-width:1000px;
    	width:100%;
    }
    @media (max-width: 994px) {
    	#service ul { left: 20px !important; }
    	#service li {
    	display: inline;
    	width: 100%;
    	height: 100%;
    	float: left;
    	}
    	#service ul.services {
    	list-style-type:none;
    	position:absolute;
    	top: 350px;
    	width:960px;
    	}
    
    /* etc....*/
    }/* end of media query*/
    
    /*Services*/
    #service { height:300px; }
    #service ul {
    	top:8%;
    	left: 10px;
    	position: absolute;
    	max-width:1000px;
    	width:100%;
    }
    
    /* etc...*/
    #service li{
      height:202px;
          width: 200px;
        float:left; /* IMPORTANT */
        list-style-type: none;
        display:inline; /* IMPORTANT */
    }

    The rules that follow the media query will take precedence (assuming they have more weight of course).
    So are you saying I should have all the media queries after the initial styles?
    I was able to get it a lot nicer than it was when I first posted. I have only targeted the next size down though so far and I had to adjust my sprites a bit.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by satori83 View Post
    So are you saying I should have all the media queries after the initial styles?
    They need to be in the order that you want the rules inside to be applied.

    If you look at the snippet I posted which was from your page and look at the styles for #services li.

    e.g.
    Code:
    @media (max-width: 994px) {
    	#service li {
    	display: inline;
    	width: 100%;
    	height: 100%;
    	float: left;
    	}
    }
    /* end of media query*/
    
    #service li{
     height:202px;
     width: 200px;
     float:left; /* IMPORTANT */
     list-style-type: none;
     display:inline; /* IMPORTANT */
    }
    You are saying "width 100%" in the max-width: 994px media rule and then you are following it with width:200px for all widths. Therefore the width will be 200px. That's fine if that is what you wanted to happen but not if you wanted it to be width:100%.

    Media queries allow you to target various widths/heights etc but they still follow the normal cascade and if you add rules after the media queries then they will modify what went before. usually you would put the media queries at the end of the stylesheet or at least after the original rules for that element and then you can be sure the media query will be effective. It would be the same problem if you defined the max-width media queries themselves in the wrong order as they should go from largest to smallest.

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Paul O'B
    Thanks! That helped a lot. I was making pretty good headway in Chrome, but then I switched to check FF and its not so hot.

    I was using stuff like this
    Code:
    zoom: .76;
    	-moz-transform:scale(0.76);
        -moz-transform-origin: 0 0;
    Is this not proper styles?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by satori83 View Post
    @Paul O'B
    Thanks! That helped a lot. I was making pretty good headway in Chrome, but then I switched to check FF and its not so hot.

    I was using stuff like this
    Code:
    zoom: .76;
    	-moz-transform:scale(0.76);
        -moz-transform-origin: 0 0;
    Is this not proper styles?
    You need to use al the vendor prefixes and the correct rule as well.
    e.g.
    Code:
    .test {
    	-webkit-transform: scale(0.76);
    	-moz-transform: scale(0.76);
    	-o-transform: scale(0.76);
    	-ms-transform: scale(0.76);
    	transform: scale(0.76);
    	-webkit-transform-origin: 0 0;
    	-moz-transform-origin: 0 0;
    	-o-transform-origin: 0 0;
    	-ms-transform-origin: 0 0;
    	transform-origin: 0 0;
    }
    I would put the zoom in a conditional stylesheet for ie8 and under because it may conflict with the other rules.


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
  •